Posted By

ebiansyah1402 on 10/09/10


Tagged

textmate template jquery


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

sharathreddyp
beebs93
Tyster
Priestd09


Simple photo gallery with jquery template and Picasaweb album


 / Published in: jQuery
 

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Picasa Album with jQuery template</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. <script src="jquery.tmpl.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <script type="text/x-jquery-tmpl" id="picasa">
  12. <li class="photo"><a href="${bigphoto}"><img src="${thumbnail}" alt="${title}" /></a></li>
  13. </script>
  14.  
  15. <ol id="image-container">
  16.  
  17. </ol>
  18.  
  19. <script>
  20. $.ajax({
  21. type : 'GET',
  22. dataType : 'jsonp',
  23. url : 'http://picasaweb.google.com/data/feed/base/user/USER_NAME/albumid/ALBUM_ID?alt=json&kind=photo&hl=en_US&',
  24.  
  25. success : function(photo){
  26. var picasa = [];
  27.  
  28. $.each(photo.feed.entry, function(index, object){
  29. if( index === 8 ) return false;
  30. picasa.push({
  31. thumbnail : object.media$group.media$thumbnail[2].url,
  32. bigphoto : object.content.src,
  33. title : object.title.$t
  34. });
  35. });
  36. $('#picasa').tmpl(picasa).appendTo('#image-container');
  37. }
  38. });
  39. </script>
  40. </body>
  41. </html>

Report this snippet  

You need to login to post a comment.