Team:Groningen/photos

From 2013.igem.org

(Difference between revisions)
 
(51 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script type="text/javascript">
+
<html>
-
var googleAlbumLink = "https://plus.google.com/photos/100710073991012754583/albums/5901919837634030369";
+
-
 
+
-
//optional-----------------------
+
-
var mySlideWidth = 600;
+
-
var mySlideHeight = 280;
+
-
var mySlideDelay = 3000; //delay in milliseconds
+
-
//3000 = 3 seconds delay
+
-
</script>
+
-
<body>
+
<!--
-
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
+
-
  <script src="./myslide.min.js"></script>
+
-
</body>
+
 +
INSTRUCTIONS: DO NOT EDIT THIS PAGE
 +
-->
-
<div id="slide"></div>
 
-
<!-- Facebook album code -->
 
<head>
<head>
-
    <meta charset='utf-8'>
+
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8" />
-
     <title>Embedded Facebook Page Photo Gallery with jQuery</title>
+
<link rel="stylesheet" href="https://2013.igem.org/Team:Groningen/CSS/DefaultPage?action=raw&ctype=text/css" type="text/css" />
-
     <style type='text/css'> #thumbs{float:left;width:200px;} #thumbs img{display:block;margin:0 0 10px;cursor:pointer;} #viewer{float:left;} </style>
+
</head>
-
  </head>
+
<body>
 +
 
 +
 
 +
</html> {{:Team:Groningen/Templates/DefaultHeader}}<html>
 +
 
 +
<div class="colmask threecol">
 +
 
 +
<span class="navigation">
 +
     </html>{{:Team:Groningen/Templates/Navigationbar}}<html>
 +
</span>
 +
 
 +
<span class="widgets">
 +
     </html>{{:Team:Groningen/Templates/facebook}}<html>
 +
</span>
 +
 
 +
<div class="mainContent">
 +
    <!-- each page with jquery needs to have this line, it will include all the jquery calls.Just include do not change-->
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
 +
 
 +
<!-- More info about this code and some settings: http://www.codehandling.com/2013/04/pimax-10-show-all-picasag-albums-and.html -->
 +
 
 +
<!-- CSS of this plugin, this piece of code hides the account name on the page -->
 +
 
 +
<style media="screen" type="text/css">
 +
 
 +
#pimax-header{display:none !important;}
 +
 
 +
</style>
 +
 
 +
<!-- end of CSS of this plugin -->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
  <head>
 +
    <title>Pimax 1.0 - show all Picasa/G+ albums and images on your website - Jquery plugin</title>
 +
 
 +
<!--<script src="./jquery.min.js"></script>-->
 +
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
 +
 +
 
 +
<script type="text/javascript">
 +
 +
var googleUserName = "drive.igem.groningen@gmail.com";  
 +
// or use "http://plus.google.com/104945011440675361336/photos"
 +
 
 +
 +
//optional parameters-----------------------------------------------
 +
//var albumNames = [];
 +
var pathToLoadingImage = "https://static.igem.org/mediawiki/2013/2/29/Loader.gif";
 +
var pimaxColumns = 3;
 +
var pimaxWidgetWidth = 900;
 +
//var pimaxWidgetHeight = 1000;
 +
 
 +
 +
function goClicked() {
 +
$('#pimax').empty().append(' loading ...');
 +
googleUserName=$('#googleUserName').val();
 +
preparePimax();
 +
}
 +
 +
//--------------------------------------------------------
 +
 
 +
 
 +
 
 +
</script>
 +
</head>
   <body>
   <body>
-
    <h1>Embedded Facebook Page Photo Gallery with jQuery</h1>
+
-
       
+
-
    <h2></h2>
+
<div id="pimax"></div>
-
    <nav id='thumbs'></nav>
+
 
-
    <img id='viewer'>
+
-
+
<script src="https://2013.igem.org/Team:Groningen/Scripts/jquerygallery?action=raw&ctype=text/javascript"></script>
-
    <script src="//code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> 
+
 
-
    <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>
+
   </body>
   </body>
 +
</div>
 +
 +
 +
</div>
 +
 +
</html> {{:Team:Groningen/Templates/DefaultFooter}}<html>
 +
 +
 +
</body>
</html>
</html>

Latest revision as of 15:20, 24 July 2013
Pimax 1.0 - show all Picasa/G+ albums and images on your website - Jquery plugin