Created
January 3, 2012 15:11
-
-
Save umarmughal/1555287 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>PhotoWall</title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <script type="text/javascript" src="jquery-photowall.js"></script> | |
| <link rel="stylesheet" type="text/css" href="jquery-photowall.css"> | |
| <style type="text/css"> | |
| html,body { | |
| background:#000; | |
| } | |
| * { | |
| padding:0; | |
| margin: 0; | |
| outline: none !important; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| PhotoWall.init({ | |
| el: '#gallery' // Gallery element | |
| ,zoom: false // Use zoom | |
| ,zoomAction: 'mouseenter' // Zoom on action | |
| ,zoomTimeout: 500 // Timeout before zoom | |
| ,zoomDuration: 100 // Zoom duration time | |
| ,showBox: true // Enavle fullscreen mode | |
| ,showBoxSocial: false // Show social buttons | |
| ,padding: 2 // padding between images in gallery | |
| ,lineMaxHeight: 240 // Max set height of pictures line (may be little bigger due to resize to fit line) | |
| }); | |
| // Max image width form Picasa | |
| // 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, | |
| // 1024, 1152, 1280, 1440, 1600 | |
| $.ajax({ | |
| url: 'https://picasaweb.google.com/data/feed/api/user/103406122733718121972/albumid/5688319941680698849' | |
| +'/?alt=json&fields=entry(gphoto:id,title,media:group(media:thumbnail,media:' | |
| +'content))&imgmax=800', | |
| dataType: 'jsonp', | |
| success: function(data){ | |
| var photos = {} | |
| if(!data.feed.entry) return; | |
| for(var i in data.feed.entry) { | |
| var e = data.feed.entry[i].media$group; | |
| var id = data.feed.entry[i].gphoto$id.$t; | |
| var t1h = e.media$thumbnail[2].height; | |
| var t1w = e.media$thumbnail[2].width; | |
| var t1src = e.media$thumbnail[2].url | |
| var t2w = Math.round(t1w * 2); | |
| var t2h = Math.round(t1h * 2); | |
| var t2src = e.media$content[0].url+'/../../w'+t2w+'-h'+t2h+'/'; | |
| var bsrc = e.media$content[0].url; | |
| var bw = e.media$content[0].width; | |
| var bh = e.media$content[0].height; | |
| photos[id] = {id:id,img:bsrc,width:bw,height:bh,th:[{src:t1src,width:t1w,height:t1h},{src:t2src,width:t2w,height:t2h}]}; | |
| } | |
| PhotoWall.load(photos); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="gallery"> | |
| <div class="body"> | |
| </div> | |
| </div> | |
| <div id="fb-root"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment