You are not logged in.

  • Login

Image problem

Zer0

Unregistered

1

Monday, October 24th 2011, 10:07pm

Image problem

Guten Abend zusammen,

ich habe nur eine kleine frage bezüglich JavaScript (natürlich).
Könnten mir die Experten bitte erklären was an folgendem Code nicht ganz richtig ist? :huh:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function span() {
					var spanTag = document.createElement("span");
                	spanTag.id = imgLoaded;
					document.getElementById("pics").appendChild(span);
					}
 
                	function loadImage(imgNumber) {
                        	var img = new Image();
                        	//this is the link to profile image of a user. This link is well defined in Facebook API Documentation
                        	img.src = "http://graph.facebook.com/"+friends[imgNumber].id+"/picture";
                        	img.alt = img.title = friends[imgNumber].name;
                        	imgLoaded++;
							span();
                        	document.getElementById("pics").appendChild(img);
							document.getElementById("count").innerHTML = imgLoaded+" of "+totalToBeLoaded + " images loaded";


Vielen Dank schonmal im Vorraus :thumbup:

Zer0

Unregistered

2

Tuesday, October 25th 2011, 12:44pm

Ach ne moment ich brauche nicht unbedingt ein span eine img.id für jedes bild würde auch gehen...
hier mal der gesamte code:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
            <head>
                    <script src="js/prototype.js" type="text/javascript"></script>
                    <script src="js/scriptaculous.js?load=dragdrop" type="text/javascript"></script>
                    <title>Facebook Profile Images Application</title>
                    <!-- Include the Facebook Javascript API -->
		<script src="http://connect.facebook.net/de_DE/all.js"></script>
                    <!-- Include the normal stylesheet-->
                    <link href="/pictures/style.css" rel="stylesheet" />
                    <!-- The whole script for the application -->
                    <script type="text/javascript">
                    /*Global variables*/
                    var loggedIn = false;
                    var imgLoaded = 0;
                    var friends = null;
                    var totalToBeLoaded = 0;
                    /*Logs the user into Facebook*/
                    function loginFacebook() {
                            //initializes the facebook API
                            FB.init({appId : "264225570289529", status : true,cookie : true,xbfml : true});
                            document.getElementById("status").innerHTML = "Waiting for Facebook permission";
                            //opens the Facebook login window for user
                            FB.login(function(response) {
                                    if (response.session) {
                                            document.getElementById("status").innerHTML = "Logged In";
                                            loggedIn = true;
                                    } else {
                                            document.getElementById("status").innerHTML = "You have not given required permissions";
                                            loggedIn = false;
                                    }
                            });
                            //disables the login button after the user has loggedIn
                            if(loggedIn) {
                                    document.getElementById("loginBtn").disabled = "disabled";
                            }
                    }
                    //gets the list of friends of the logged in person
                    function getFriends() {
                            //if the person has not pressed login button
                            if(!loggedIn) {
                            loginFacebook();
                            }
                            document.getElementById("status").innerHTML = "Now loading your friends' profile images...";
                            //if the person is loggedIn
                            if(loggedIn) {
                                    document.getElementById("friendBtn").disabled = "disabled";
                                    FB.api("/me/friends",function(response){
                                            friends = response["data"];
                                            totalToBeLoaded = friends.length;
                                            loadImage(0);
                                    });
                            }
                    }
 
					function span() {
					var spanTag = document.createElement("span");
                    spanTag.id = imgLoaded;
					document.getElementById("pics").appendChild(span);
					}
                    //load the images one at a time
                    function loadImage(imgNumber) {
                            var img = new Image();
                            //this is the link to profile image of a user. This link is well defined in Facebook API Documentation
                            img.src = "http://graph.facebook.com/"+friends[imgNumber].id+"/picture";
                            img.alt = img.title = friends[imgNumber].name;
                            imgLoaded++;
							span();
                            document.getElementById("pics").appendChild(img);
							document.getElementById("count").innerHTML = imgLoaded+" of "+totalToBeLoaded + " images loaded";
 
                            if(imgLoaded==totalToBeLoaded) {
                                    document.getElementById("status").innerHTML = "Loaded all friends' profile images...";
                            }
							}
 
                            function init() {
                            document.getElementById("loginBtn").onclick = loginFacebook;
                            document.getElementById("friendBtn").onclick = getFriends;
                    }
                    //calls init function once all the resources are loaded
                    window.addEventListener("load",init,true);
                    </script>
            </head>
            <body>
                    <div id="fb-root"></div>
                    <div id="wrapper">
                            <input class="btn" type="button" id="loginBtn" value="Get Permissions from Facebook" />
                            <input class="btn" type="button" value="Get Friends" id="friendBtn" />
                            <!-- the following div will show the status messages during the workflow of application-->
                            <div id="status"></div>
                            <!-- shows the images loaded till now-->
                            <div id="count"></div>
                            <!-- holds all the profile pics-->
                            <div id="pics"></div>
                            <div id="footer"></div>
                    </div>
            </body>
    </html>

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

3

Saturday, October 29th 2011, 12:14pm

Hi,
was genau ist denn "nicht ganz richtig" ?
in den div container pics hängst du abwechselnd span und img Elemente ein. Sollten die vllt ineinander? Gibt es größere Probleme?
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Similar threads

Tagging

Social bookmarks