Team:BCCS-Bristol/Wetlab/Image Gallery

From 2010.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
 +
<style type="text/css">
 +
div.img
 +
  {
 +
  margin:2px;
 +
  border:1px solid #0000ff;
 +
  height:239px;
 +
  width:207px;
 +
  float:left;
 +
  text-align:center;
 +
  }
 +
div.img img
 +
  {
 +
  display:inline-block;
 +
  height:auto;
 +
  width:auto;
 +
  max-height:150px;
 +
  max-width:200px;
 +
  margin:3px;
 +
  border:1px solid #ffffff;
 +
  }
 +
div.img a:hover img
 +
  {
 +
  border:1px solid #0000ff;
 +
  }
 +
div.desc
 +
  {
 +
  text-align:center;
 +
  font-weight:normal;
 +
  width:200px;
 +
  height:auto;
 +
  margin:2px;
 +
  }
 +
</style>
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Line 14: Line 49:
/* This is basic - uses default settings */
/* This is basic - uses default settings */
-
+
 
-
$("a#single_image").fancybox();
+
$("a#single_image").fancybox({
 +
            'titlePosition'  : 'inside'
 +
        });
});
});
</script>
</script>
Line 24: Line 61:
Gallery containing all of the nice pictures, e.g. glowing E.coli, beads, test tubes, petri dishes, us hard at work etc
Gallery containing all of the nice pictures, e.g. glowing E.coli, beads, test tubes, petri dishes, us hard at work etc
 +
 +
=Test Gallery=
 +
 +
TODO
 +
- gallery container with auto-centering and title
 +
- proper colours etc
<html>
<html>
-
<a id="single_image" href="http://dl.dropbox.com/u/1944619/big.jpg"><img src="http://dl.dropbox.com/u/1944619/thumb.jpg" alt=""/></a>
+
<div class="img">
 +
  <a id="single_image" href="http://dl.dropbox.com/u/1944619/big.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="http://dl.dropbox.com/u/1944619/thumb.jpg"  
 +
  alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
 +
  <div class="desc">This is a short description that will appear in the gallery.</div>
 +
</div>
 +
 
 +
<div class="img">
 +
  <a id="single_image" href="http://dl.dropbox.com/u/1944619/pie.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="http://dl.dropbox.com/u/1944619/pie.jpg"
 +
  alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
 +
  <div class="desc">This is a short description that will appear in the gallery.</div>
 +
</div>
 +
 
 +
<div class="img">
 +
  <a id="single_image" href="http://dl.dropbox.com/u/1944619/million_dollar_pie.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="http://dl.dropbox.com/u/1944619/million_dollar_pie.jpg"
 +
  alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
 +
  <div class="desc">This is a short description that will appear in the gallery.</div>
 +
</div>
 +
 
 +
<div class="img">
 +
  <a id="single_image" href="http://dl.dropbox.com/u/1944619/pie_main.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="http://dl.dropbox.com/u/1944619/pie_main.jpg"
 +
  alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
 +
  <div class="desc">This is a short description that will appear in the gallery.</div>
 +
</div>
 +
 
 +
<div class="img">
 +
  <a id="single_image" href="http://dl.dropbox.com/u/1944619/FFACZEF3X5EV1BEGXU.medium.jpg"
 +
    title="This is a long description that will appear in the popup box. Lorem Ipsum etcetera">
 +
  <img src="http://dl.dropbox.com/u/1944619/FFACZEF3X5EV1BEGXU.medium.jpg"
 +
  alt="This is a long description that will appear in the popup box. Lorem Ipsum etcetera"/></a>
 +
  <div class="desc">This is a short description that will appear in the gallery.</div>
 +
</div>
 +
 
 +
 
</html>
</html>

Revision as of 15:42, 20 October 2010

Image Gallery

Gallery containing all of the nice pictures, e.g. glowing E.coli, beads, test tubes, petri dishes, us hard at work etc

Test Gallery

TODO - gallery container with auto-centering and title - proper colours etc

This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.
This is a long description that will appear in the popup box. Lorem Ipsum etcetera
This is a short description that will appear in the gallery.

Retrieved from "http://2010.igem.org/Team:BCCS-Bristol/Wetlab/Image_Gallery"