You say you need a photo gallery, but you want it to be updated easily? Like automatically pulling images from Flickr? But, it's got to look great and have that cool lightbox plug-in effect going....Well, that's what I had to come up with also. Want to see how it's done? Well, let's get started...
Step 1 - jQuery.
Get the latest jQuery
Step 2 - Lightbox.
Grab the lightbox plug-in from Leandro Vieira Pinho ( http://leandrovieira.com/projects/jquery/lightbox/ )
Step 3 - Setup.
Ok, get you page all setup like so... the head section should look like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT
D/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gallery Test</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript" >
</script>
<script src="js/jquery.lightbox-0.5.js" type="text/javascript"></script>
<link href="css/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css" />
</head>
Step 4 - The JSON Call to Flickr.
Now, we need a way to call our Flickr set via JSON. This is pretty straightforward, thanks to a bit of code I stumbled on here (Viget Labs Blog)
Here is the JSON call, don't add this to your page yet, we need to modify it.
1: $.getJSON("http://api.flickr.com/services/feeds/groups_pool .gne?id=675729@N22&lang=en-
us&format=json&jsoncallback=?", function(data){
2: $.each(data.items, function(i,item){
3: $("<img/>").attr("src", item.media.m).appendTo("#images")
4: .wrap("<a href='" + item.link + "'></a>");
5: });
6: });
7:
In Viget Labs page there is a div which acts as a container for all the flickr images pulled in.
1: <div id="images"></div>
Each image and each source link are added inside the div tag.
This works great if you need a simple page with links back to flickr for each thumbnail, but we want to use the lightbox plug-in. There are some extra steps to making this work.
First we need to change the result code to append list items (<li>) to an un-ordered list (<ul>).
So for the HTML in the page we just need a container element and the list which will hold our images.
1:
2: <div id="gallery">
3: <ul id="images">
4:
5: </ul>
6: </div>
Step 5 - Putting It All Together.
Finally, 2 changes need to be to the JSON call, first wrap outer <a> tag in a <li>, then add the helper function trim_m.
The trim_m function takes care of showing the FULL size flickr image and not just the preview. We do this by removing the _m from the URL. You could use the replace function here and trim this to one, I just hacked this together quickly...
Lasty, we need to call the lightbox plug-in. It's important to recognize that we need to use the lightbox() funtion within the callback, if we put it anywhere else the items won't be loaded yet. This is becuase the JSON call is asynchronous.
Ok, here is the complete listing, the demo is here for you to see in action. You can download the code here
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title>Gallery Test</title>
5:
6: <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
7:
8: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/java
script" ></script>
9: <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
10: <link href="css/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css" />
11:
12: <style type="text/css">
13: /* jQuery lightBox plugin - Gallery style */
14: #gallery {
15: background-color: #444;
16: padding: 10px;
17: width: 100%;
18: }
19: #gallery ul {
20: list-style: none;
21: }
22: #gallery ul li {
23: display: inline;
24: }
25: #gallery ul img {
26: border: 5px solid #3e3e3e;
27: border-width: 5px 5px 20px;
28: }
29: #gallery ul a:hover img {
30: border: 5px solid #fff;
31: border-width: 5px 5px 20px;
32: color: #fff;
33: }
34: #gallery ul a:hover {
35: color: #fff;
36: }
37: </style>
38: </head>
39: <body>
40:
41: <div id="gallery">
42: <ul id="images">
43: </ul>
44: </div>
45:
46: <script type="text/javascript">
47:
48: $(document).ready(function(){
49:
50: $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=721576228964259
71&nsid=45204265
@N05&lang=en-us&format=json&jsoncallback=?", function(data){
51: $.each(data.items, function(i,item){
52:
53: $("<img/>").attr("src", item.media.m ).appendTo("#images")
54: .wrap("<li><a href='" + trim_m( item.media.m )+ "'></a></li>");
55:
56: // add lightbox after due to callback
57: $('#gallery a').lightBox();
58: });
59:
60: });
61:
62: function trim_m(src)
63: {
64: src = src.substring(0, src.length - 6) ; // remove "_m.jpg";
65: src = src + ".jpg";
66: return src;
67: }
68: });
69:
70: </script>
71:
72: </body>
73: </html>
Subscribe