I'm using Highslide to show my photos. I want to introduce simple gallery - if somebody click photo "dolno.jpg" it will show up gallery with 3 photos. Now is only one (1.jpg). I have 3 pictures: 1.jpg, 2.jpg, 3.jpg How can I do this? This is my code:
<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
<td>
<a class="highslide" href="1.jpg" onclick="return hs.expand(this, { captionText: '<b>THIS</b>' } )">
<img src="/logafirm/dolno.jpg" id="imgg" title="Click to enlarge" height="80" weight="80"></a>
<font color="#52180"><b>THIS</font></b></A>
</td>
Just duplicate the anchor element for every other image you want to display.
Like this
<a class="highslide" href="1.jpg" onclick="return hs.expand(this, { captionText: '<b>THIS</b>' } )">
<img src="/logafirm/dolno.jpg" id="imgg" title="Click to enlarge" height="80" weight="80">
</a>
<a class="highslide" href="2.jpg" onclick="return hs.expand(this, { captionText: '<b>THE OTHER IMAGE</b>' } )">
<img src="/logafirm/THE_OTHER_IMAGE.jpg" id="imgg" title="Click to enlarge" height="80" weight="80">
</a>
ALso you will need specify your slideshow settings..
According to the docs:
<script type="text/javascript">
hs.addSlideshow({
// slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: true,
overlayOptions: {
opacity: .6,
position: 'top center',
hideOnMouseOut: true
}
});
// Optional: a crossfade transition looks good with the slideshow
hs.transitions = ['expand', 'crossfade'];
</script>
And lastly..If you want only display first thumbnail, simply hide the others..With CSS or maybe better with javascript (user without js will see the images)