advanced code snippet search

Posted By

ebiansyah1402 on 10/09/10


Tagged

textmate template jquery


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

sharathreddyp
beebs93
Tyster


Simple photo gallery with jquery template and Picasaweb album

 / Published in: jQuery
 
Expand | Embed | Plain Text 
  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.