There is shorter version of my code:
Code: Select all
<script type="text/javascript">
// gallery config object
var config1 = {
slideshowGroup: 'group1',
autoplay: false,
transitions: ['expand', 'crossfade']
};
// gallery config object
var config2 = {
slideshowGroup: 'group2',
autoplay: false,
transitions: ['expand', 'crossfade']
};
<div class="highslide-gallery" style="width: 600px; margin: auto">
<a style="display: none;" class='highslide' id="2" href='foto/plenerowe/1.jpg' onclick="return hs.expand(this, config1)">
<img src='foto/plenerowe/1.jpg' alt='Frozen lake'/></a>
<a style="display: none;" class='highslide' id="1" href='foto/reporterskie/1.jpg' onclick="return hs.expand(this, config2)">
<img src='foto/reporterskie/1.jpg' alt='Frozen lake'/></a>
</div>
<div id="content">
<a href="foto/reporterskie/1.jpg" id="foo"><img src="images/reporterska.png" class="fade" /></a>
<a href="foto/plenerowe/1.jpg" id="foo2"><img src="images/plenerowa.png" class="fade" /></a>
</div>
<script type="text/javascript">
document.getElementById("foo2").onclick = function(){
return hs.expand(document.getElementById('2'), config1)
}
document.getElementById("foo").onclick = function(){
return hs.expand(document.getElementById('1'), config2)
}
</script>