View the Flickr photo wall »
Getting started: the HTML/CSS
The CSS is fairly self explanatory. I floated the ‘image-container’ class to the left since I want all the photos to display in rows of three. I’m letting the browser wrap them within the container. Next, I just applied some styling to suit my taste:
Starting the jQuery and the Initial Ajax Request
Getting Basic Information and the Geo Location of Each Photo
Line 1 continues the jQuery JSON request and instructs jQuery to run the code within the function when the data is received. Line 4 in the following code starts jQuery’s .each() method, which is arguably an easier way to write a for loop. This loop will carry out a function through each of the items (photos) that Flickr sent. On line 7 I created a string variable that contains a URL for the image on which the loop is currently on (information on how the URL is build can be found here or on the Flickr API URL info page). Notice how and where I place the data from Flickr’s JSON response. I will later use this variable as the value of the href parameter of the anchor linking back to the image. After that, on line 10, I turn the photo’s ID into a variable as I will be using this several times.
Each image will link to its latitude and longitude on the Flickr map
Getting the Flickr tags of the images
Preparing the variable to append to the document
Now that we have prepared all of our data in nice little variables that we can use, we need to combine it all into one variable that we can easily insert into the DOM. On line 2 I create this variable and give it a value of some HTML interlaced with some of the data from the request received. On line 5, I use a conditional statement to see if the tags variable exists. It will only exist if there were tags in our data because if there weren’t, our previous conditional statement wouldn’t have run the code that created the variable in the first place. Returning the typeof of a variable will tell you what kind of variable it is. If the typeof is undefined, then the variable doesn’t exist. On line 8, I use the += operator to concatenate a string onto the previously created imgCont variable.
On line 12, I do the exact same thing with the geo location data as I did with the tags on line 5. I add the description of the image to the imgCont variable on line 19. Now that the imgCont variable contains all the data I want it to, I use jQuery’s appendTo() method to insert the picture and all its data into the #image-container div in the HTML. Directly after that I delete the global variable pLocation so that it doesn’t repeat in the next loop because that will be a different image.
Adding the rollover effect and removing the loading image
An image which reveals information on mouseover
In the following code, I use jQuery’s .live() method to apply a function when our images are either rolled over or rolled off of. In this situation I have to use .live() instead of .hover() because I need the rollover to apply to elements inserted into the DOM after the DOM was loaded. .live() is an awesome method that will apply a function to all elements that match the selector no matter when they are added to the DOM. To create the rollover, I just change the class of the image container to a class that’s display property is not none. Line 5 just reverses this previous function when the mouse hovers off the image. The last thing is to remove the loader image since everything is done. Although all images may not have been loaded, everything has been added to the document. We could create a function that checks to see if the last image was loaded and then to remove the loader image, but this tutorial is already quite long.
Congratulations on building a dynamic Flickr photo wall. I know it was a long tutorial, but I wanted to provide as much information as possible. Was the tutorial helpful for you? See anything that should be changed? Want to see more tutorials like this? Let me know in the comments!