Team:Groningen/photos

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
 
<script type="text/javascript">
<script type="text/javascript">
  var googleAlbumLink = "https://plus.google.com/photos/100710073991012754583/albums/5901919837634030369";
  var googleAlbumLink = "https://plus.google.com/photos/100710073991012754583/albums/5901919837634030369";
Line 20: Line 20:
<div id="slide"></div>
<div id="slide"></div>
-
<!-- FACEBOOK ALBUM CODE -->
+
<head>
-
     <style>
+
    <meta charset='utf-8'>
-
        .album { list-style: none;}
+
     <title>Embedded Facebook Page Photo Gallery with jQuery</title>
-
        .album li { float:left; height:150px; margin-bottom:10px; text-align:center;}
+
    <style type='text/css'> #thumbs{float:left;width:200px;} #thumbs img{display:block;margin:0 0 10px;cursor:pointer;} #viewer{float:left;} </style>
-
        .album a { display:block; width:150px; padding:5px; margin:5px; border: 4px solid #444;}
+
  </head>
-
        .album a:hover { border: 4px solid #44d;}
+
  <body>
-
     </style>
+
     <h1>Embedded Facebook Page Photo Gallery with jQuery</h1>
-
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
       
-
     <script>
+
    <h2></h2>
-
    //fbAlbum Script courtesy of zach@lysobey.com | http://zach.lysobey.com/projects/fbalbum
+
    <nav id='thumbs'></nav>
-
    (function($){$.fn.fbAlbum=function(f){var g=this;var h={'albumID':10150302289698306,'limit':100,'ulClass':'album','callback':'','title':true};if(f){$.extend(h,f)}var i="https://graph.facebook.com/"+h.albumID+"/photos?limit="+h.limit+"&callback=?";$.getJSON(i,function(a){var b=[];for(var c in a){for(var d in a[c]){val2=a[c][d];if(typeof(val2.source)!="undefined"){var e="";if(h.title&&val2.name){e=val2.name}b.push('<li><a class="imageLink" rel="group" href="'+val2.source+'"><img src="'+val2.picture+'" title="'+e+'"/></a></li>')}}};$('<ul />',{'class':h.ulClass,html:b.join('')}).appendTo(g);if(h.callback){h.callback()}});return this}})(jQuery);
+
    <img id='viewer'>
-
    $(document).ready(function() {
+
-
        $('#FBalbum').fbAlbum({
+
     <script src="//code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
-
            'albumID':128444677366647
+
     <script type="text/javascript">
-
         });  
+
      (function (gallery_id) {
-
    });
+
        var title = $('h2'),
 +
            viewer = $('#viewer'),
 +
            thumbs = $('#thumbs');
 +
       
 +
        // album info
 +
        $.getJSON('//graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
 +
          title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name);
 +
        });
 +
 +
        // images
 +
        $.getJSON('//graph.facebook.com/' + gallery_id + '/photos?callback=?', function(json, status, xhr) {
 +
          var imgs = json.data;
 +
 +
          viewer.attr('src', imgs[0].images[0].source)
 +
 +
          for (var i = 0, l = imgs.length - 1; i < l; i++) {
 +
            $('<img src="' + imgs[i].images[3].source + '" data-fullsize="' + imgs[i].images[0].source + '">').appendTo(thumbs);
 +
          }
 +
     
 +
          $('img', thumbs).bind('click', function(e) {
 +
            e.preventDefault();
 +
            viewer.attr('src', $(this).attr('data-fullsize'));
 +
          });
 +
         });
 +
      })('426067170422'); // let's go -- put the gallery ID here
     </script>
     </script>
-
   <!-- END FACEBOOK ALBUM CODE -->
+
   </body>
-
</head>
 
</html>
</html>

Revision as of 12:55, 18 July 2013

Embedded Facebook Page Photo Gallery with jQuery

Embedded Facebook Page Photo Gallery with jQuery

Retrieved from "http://2013.igem.org/Team:Groningen/photos"