Team:Imperial College London/Gallery

From 2009.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Imperial/09/TemplateTop}}
{{Imperial/09/TemplateTop}}
<html>
<html>
-
<script type="text/javascript" src="http://www.charlesfracchia.com/igemWiki/Photo/swfobject.js"></script>
+
<!--
-
<style type="text/css">
+
1 ) Reference to the files containing the JavaScript and CSS.
-
/* hide from ie on mac \*/
+
These files must be located on your server.
-
html {
+
-->
-
height: 100%;
+
-
overflow: hidden;
+
-
}
+
-
+
-
#flashcontent {
+
-
height: 100%;
+
-
}
+
-
/* end hide */
+
-
a {
+
<script type="text/javascript" src="http://www.charlesfracchia.com/igemWiki/highslide/highslide-with-gallery.js"></script>
-
color:#cccccc;
+
<link rel="stylesheet" type="text/css" href="http://www.charlesfracchia.com/igemWiki/highslide/highslide.css" />
-
}
+
 
-
</style>
+
<!--
-
<div id="flashcontent">This gallery requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
+
2) Optionally override the settings defined at the top
-
<script type="text/javascript">
+
of the highslide.js file. The parameter hs.graphicsDir is important!
-
+
-->
-
var fo = new SWFObject("http://www.charlesfracchia.com/igemWiki/Photo/viewer.swf", "viewer", "100%", "100%", "8", "#FFFFFF");
+
 
-
+
<script type="text/javascript">
-
fo.addVariable("xmlDataPath", "http://www.charlesfracchia.com/igemWiki/Photo/gallery.xml");
+
hs.graphicsDir = 'http://www.charlesfracchia.com/igemWiki/highslide/graphics/';
-
//fo.addVariable("firstImageIndex", "5");
+
hs.align = 'center';
-
//fo.addVariable("langOpenImage", "Open Image in New Window");
+
hs.transitions = ['expand', 'crossfade'];
-
//fo.addVariable("langAbout", "About");
+
hs.wrapperClassName = 'dark borderless floating-caption';
-
//fo.addVariable("preloaderColor", "0xFFFFFF");
+
hs.fadeInOut = true;
-
+
hs.dimmingOpacity = .75;
-
fo.write("flashcontent");
+
 
-
</script>
+
// Add the controlbar
 +
if (hs.addSlideshow) hs.addSlideshow({
 +
//slideshowGroup: 'group1',
 +
interval: 5000,
 +
repeat: false,
 +
useControls: true,
 +
fixedControls: 'fit',
 +
overlayOptions: {
 +
opacity: .6,
 +
position: 'bottom center',
 +
hideOnMouseOut: true
 +
}
 +
});
 +
 
 +
</script>
 +
 
 +
<!--
 +
3) Put the thumbnails inside a div for styling
 +
-->
 +
<div class="highslide-gallery">
 +
 
 +
<!--
 +
4) This is how you mark up the thumbnail image with an anchor tag around it.
 +
The anchor's href attribute defines the URL of the full-size image.
 +
-->
 +
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
 +
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
 +
title="Click to enlarge" />
 +
</a>
 +
 
 +
<!--
 +
5 (optional). This is how you mark up the caption. The correct class name is important.
 +
-->
 +
 
 +
<div class="highslide-caption">
 +
Caption for the first image.
 +
</div>
 +
 
 +
 
 +
<!-- Repetionion of the above -->
 +
<a href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
 +
<img src="../images/gallery2.thumb.jpg" alt="Highslide JS"
 +
title="Click to enlarge" /></a>
 +
 
 +
<div class="highslide-caption">
 +
Caption for the second image.
 +
</div>
 +
 
 +
<a href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
 +
<img src="../images/gallery3.thumb.jpg" alt="Highslide JS"
 +
title="Click to enlarge" /></a>
 +
 
 +
<div class="highslide-caption">
 +
Caption for the third image.
 +
</div>
 +
 
 +
</div>
</html>
</html>
-
iurgeibger
 
{{Imperial/09/TemplateBottom}}
{{Imperial/09/TemplateBottom}}

Revision as of 12:20, 5 October 2009
Highslide JS
Caption for the first image.
Highslide JS
Caption for the second image.
Highslide JS
Caption for the third image.
Mr. Gene   Geneart   Clontech   Giant Microbes

Retrieved from "http://2009.igem.org/Team:Imperial_College_London/Gallery"