Team:Cooper Union/script/galleryDEMO

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<script type="text/javascript" src="https://2014.igem.org/Team:Cooper_Union/script/jquery?action=raw&ctype=application/javascript" ></script>
+
 
</head>
</head>
<body>
<body>
 +
 +
 +
 +
 +
 +
 +
 +
 +
<script type="text/javascript"
 +
src="https://2014.igem.org/Team:Cooper_Union/script/jquery?action=raw&ctype=application/javascript" ></script>
 +
 +
<script type="text/javascript" charset="utf-8">
 +
  $(document).ready(function () {
 +
  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>
<style>
<style>
.js-image-gallery a img { margin:1px; width:120px; height:90px; border:4px solid #fff; }
.js-image-gallery a img { margin:1px; width:120px; height:90px; border:4px solid #fff; }
Line 14: Line 56:
div.image-display img  {  z-index:1; width:600px; }
div.image-display img  {  z-index:1; width:600px; }
div.galleryDisplay {  margin:10%; text-align:center; }
div.galleryDisplay {  margin:10%; text-align:center; }
-
 
</style>
</style>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
Line 67: Line 119:
-
<script type="text/javascript" charset="utf-8">
 
-
  $(document).ready(function () {
+
 
-
 
+
 
-
 
+
-
 
+
-
  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>
+

Revision as of 21:55, 15 October 2014

close


close

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