Team:Freiburg/gallery

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<style>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>Highslide JS</title>
-
</style>
+
<!--
 +
1 ) Reference to the files containing the JavaScript and CSS.
 +
These files must be located on your server.
 +
-->
-
<script>
+
<script type="text/javascript" src="http://stefankraemer.bplaced.net/highslide-with-gallery.js"></script>
-
$(document).ready(function() {
+
<link rel="stylesheet" type="text/css" href="http://stefankraemer.bplaced.net/highslide.css" />
-
$(".fancybox").fancybox({
+
 
-
openEffect : 'none',
+
<!--
-
closeEffect : 'none'
+
2) Optionally override the settings defined at the top
-
});
+
of the highslide.js file. The parameter hs.graphicsDir is important!
 +
-->
 +
 
 +
<script type="text/javascript">
 +
hs.graphicsDir = '../highslide/graphics/';
 +
hs.align = 'center';
 +
hs.transitions = ['expand', 'crossfade'];
 +
hs.outlineType = 'rounded-white';
 +
hs.fadeInOut = true;
 +
//hs.dimmingOpacity = 0.75;
 +
 
 +
// Add the controlbar
 +
hs.addSlideshow({
 +
//slideshowGroup: 'group1',
 +
interval: 5000,
 +
repeat: false,
 +
useControls: true,
 +
fixedControls: 'fit',
 +
overlayOptions: {
 +
opacity: 0.75,
 +
position: 'bottom center',
 +
hideOnMouseOut: true
 +
}
});
});
</script>
</script>
</head>
</head>
 +
<body>
<body>
-
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg" title="Westfield Waterfalls - Middletown CT Lower (Graham_CS)">
+
<!--
-
<img src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_m.jpg" alt="" />
+
3) Put the thumbnails inside a div for styling
-
</a>
+
-->
-
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg" title="Calm Before The Storm (One Shoe Photography Ltd.)">
+
 
-
<img src="http://farm4.staticflickr.com/3824/9041440555_2175b32078_m.jpg" alt="" />
+
<div class="highslide-gallery">
-
</a>
+
<!--
-
<a class="fancybox" rel="gallery1" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg" title="Lambs Valley (JMImagesonline.com)">
+
4) This is how you mark up the thumbnail image with an anchor tag around it.
-
<img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
+
The anchor's href attribute defines the URL of the full-size image.
-
</a>
+
-->
-
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg" title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))">
+
<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
-
<img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt="" />
+
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
 +
title="Click to enlarge" />
</a>
</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. This caption can be styled using CSS.
 +
</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>
</body>
</body>
</html>
</html>

Revision as of 22:05, 25 September 2013

Highslide JS

Highslide JS
Caption for the first image. This caption can be styled using CSS.
Highslide JS
Caption for the second image.
Highslide JS
Caption for the third image.

Retrieved from "http://2013.igem.org/Team:Freiburg/gallery"