Team:Cooper Union/script/galleryDEMO

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
<html>
<html>
 +
<head>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:Cooper_Union/script/jquery?action=raw&ctype=application/javascript" ></script>
 +
</head>
 +
<body>
 +
 +
<style>
 +
.js-image-gallery a img { margin:1px; width:120px; height:90px; border:4px solid #fff; }
 +
.js-image-gallery a:hover img {  border:4px solid #000; }
 +
body { background-color:#fff; }
 +
div.pp_default .pp_close  { background-image:url('https://static.igem.org/mediawiki/2014/6/66/CU_2014_closeButton.png') !important; width:30px !important; height:30px !important; right:10px !important; }
 +
div.image-display {  display:none; position:relative;  }
 +
div.image-display .close_button  { overflow:hidden; text-indent:100px; background-image:url('https://static.igem.org/mediawiki/2014/6/66/CU_2014_closeButton.png'); position:absolute; top:10px; left:50%; margin-left:260px; width:30px; height:30px; z-index:10; display:block; }
 +
div.image-display img  {  z-index:1; width:600px; }
 +
div.galleryDisplay {  margin:10%; text-align:center; }
 +
 +
</style>
 +
-
<div class="js-image-gallery">
+
<div class="galleryDisplay gallery1">
-
      <a href="https://static.igem.org/mediawiki/2014/7/7f/CU_TDT_O1.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/7/7f/CU_TDT_O1.JPG" alt="" /></a>  
+
<div class="js-image-gallery">
-
      <a href="https://static.igem.org/mediawiki/2014/c/c7/CU_TDT_O2.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/c/c7/CU_TDT_O2.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/7/7f/CU_TDT_O1.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/7/7f/CU_TDT_O1.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/e/e3/CU_TDT_O3.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/e/e3/CU_TDT_O3.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/c/c7/CU_TDT_O2.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/c/c7/CU_TDT_O2.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/1/15/CU_TDT_O4.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/1/15/CU_TDT_O4.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/e/e3/CU_TDT_O3.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/e/e3/CU_TDT_O3.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/3/32/CU_TDT_O5.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/3/32/CU_TDT_O5.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/1/15/CU_TDT_O4.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/1/15/CU_TDT_O4.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/0/03/CU_TDT_O6.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/0/03/CU_TDT_O6.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/3/32/CU_TDT_O5.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/3/32/CU_TDT_O5.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/4/45/CU_TDT_O7.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/4/45/CU_TDT_O7.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/0/03/CU_TDT_O6.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/0/03/CU_TDT_O6.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/7/72/CU_TDT_O8.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/7/72/CU_TDT_O8.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/4/45/CU_TDT_O7.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/4/45/CU_TDT_O7.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/7/70/CU_TDT_O9.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/7/70/CU_TDT_O9.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/7/72/CU_TDT_O8.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/7/72/CU_TDT_O8.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/f/f3/CU_TDT_O10.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/f/f3/CU_TDT_O10.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/7/70/CU_TDT_O9.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/7/70/CU_TDT_O9.JPG" alt="" /></a>  
-
      <a href="https://static.igem.org/mediawiki/2014/b/bb/CU_TDT_O11.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/b/bb/CU_TDT_O11.JPG" alt="" /></a>  
+
  <a href="https://static.igem.org/mediawiki/2014/f/f3/CU_TDT_O10.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/f/f3/CU_TDT_O10.JPG" alt="" /></a>  
 +
  <a href="https://static.igem.org/mediawiki/2014/b/bb/CU_TDT_O11.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/b/bb/CU_TDT_O11.JPG" alt="" /></a>
 +
</div>
 +
<div class="image-display">
 +
<img src="" />
 +
<span class="close_button">close</span>
 +
</div>
</div>
</div>
 +
 +
 +
 +
 +
<br />
 +
<br />
<hr />
<hr />
-
<hr />
+
 
-
<hr />
+
 
-
<div class="js-image-gallery">
+
<div class="galleryDisplay gallery2">
 +
<div class="js-image-gallery">
       <a href="https://static.igem.org/mediawiki/2014/8/86/CU_TELO_O1.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/8/86/CU_TELO_O1.JPG" alt="" /></a>  
       <a href="https://static.igem.org/mediawiki/2014/8/86/CU_TELO_O1.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/8/86/CU_TELO_O1.JPG" alt="" /></a>  
       <a href="https://static.igem.org/mediawiki/2014/2/2f/CU_TELO_O2.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/2/2f/CU_TELO_O2.JPG" alt="" /></a>  
       <a href="https://static.igem.org/mediawiki/2014/2/2f/CU_TELO_O2.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/2/2f/CU_TELO_O2.JPG" alt="" /></a>  
Line 27: Line 56:
       <a href="https://static.igem.org/mediawiki/2014/3/32/CU_TELO_O6.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/3/32/CU_TELO_O6.JPG" alt="" /></a>  
       <a href="https://static.igem.org/mediawiki/2014/3/32/CU_TELO_O6.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/3/32/CU_TELO_O6.JPG" alt="" /></a>  
       <a href="https://static.igem.org/mediawiki/2014/0/00/CU_TELO_O7.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/0/00/CU_TELO_O7.JPG" alt="" /></a>  
       <a href="https://static.igem.org/mediawiki/2014/0/00/CU_TELO_O7.JPG" rel="prettyPhoto"><img src="https://static.igem.org/mediawiki/2014/0/00/CU_TELO_O7.JPG" alt="" /></a>  
 +
</div>
 +
<div class="image-display">
 +
<img src="" />
 +
<span class="close_button">close</span>
 +
</div>
</div>
</div>
-
 
-
 
-
<style>
 
-
.js-image-gallery a img { margin:1px; width:120px; height:90px; border:4px solid #fff; }
 
-
.js-image-gallery a:hover img {  border:4px solid #000; }
 
-
body { background-color:#fff; }
 
-
 
-
div.pp_default .pp_close  { background-image:url('http://rbth.com/assets/images/special/startups/closeButton.png') !important; width:30px !important; height:30px !important; right:10px !important; }
 
-
</style>
 
-
 
-
<link rel="stylesheet" href="https://2014.igem.org/Team:Cooper_Union/CSS?action=raw&ctype=text/css" type="text/css" />
 
-
<script type="text/javascript" src="https://2014.igem.org/Team:Cooper_Union/script/jquery?action=raw&ctype=application/javascript" ></script>
 
-
 
-
<link rel="stylesheet" href="https://2014.igem.org/Team:Cooper_Union/script/galleryCss?action=raw" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
 
-
 
-
<script type="text/javascript" src="https://2014.igem.org/Team:Cooper_Union/script/gallery?action=raw&ctype=application/javascript"></script>
 
<script type="text/javascript" charset="utf-8">
<script type="text/javascript" charset="utf-8">
 +
   $(document).ready(function () {
   $(document).ready(function () {
-
$('.js-image-gallery a').prettyPhoto({ animation_speed: 'fast', slideshow: 10000, hideflash: true, social_tools: false });  
+
 
 +
 
 +
 
 +
  function InitCooperUnionImageGallery(parentSelector, autoOpen)
 +
  {
 +
 
 +
var firstImage = $(parentSelector + ' div a img').eq(0);
 +
var imageDisplay = $(parentSelector + ' div.image-display img');
 +
var imageDisplayContainer = $(parentSelector + ' div.image-display');
 +
var closeButton = $(parentSelector + ' div.image-display span.close_button');
 +
 +
imageDisplay.attr('src', firstImage.attr('src'));
 +
   
 +
  $(parentSelector + ' div a').click(function()
 +
  {
 +
imageDisplayContainer.slideDown();
 +
imageDisplay.attr('src', $(this).attr('href'));
 +
return false;
 +
  });
 +
 
 +
  closeButton.click(function()
 +
  {
 +
imageDisplayContainer.slideUp();
 +
return false;
 +
  });
 +
 
 +
  if (autoOpen)
 +
  {
 +
 
 +
  imageDisplayContainer.show();
 +
  }
 +
  }
 +
 
 +
 
 +
  InitCooperUnionImageGallery('.gallery1', true);
 +
  InitCooperUnionImageGallery('.gallery2', true);
 +
 
 +
 
 +
 
   });
   });
</script>
</script>
 +
 +
 +
 +
</body>
</html>
</html>

Revision as of 21:52, 15 October 2014

close


close

Retrieved from "http://2014.igem.org/Team:Cooper_Union/script/galleryDEMO"