Problem with two galleries on one page

[rafcio21]

My code mostly works, but there is problem with opening. I using "onclick" function. When I clicking on button, it opening two my galleries instead of one. I tried many ways, but no one worked. I hope that you'll help me in finding solution

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>

EDIT: I have placed my page in internet, check this problem online http://samoloty.222.pl/portfolio/galeria.html

[RoadRash]

Hi,

Remove this part:

Code: Select all

<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>

And do it like this instead:

Code: Select all

<div id="content">
    <a href="foto/reporterskie/1.jpg" id="foo" onclick="return document.getElementById('1').onclick()"><img src="images/reporterska.png" class="fade" /></a>
    <a href="foto/plenerowe/1.jpg" id="foo2" onclick="return document.getElementById('2').onclick()"><img src="images/plenerowa.png" class="fade" /></a>
</div>

This method is described in this FAQ: viewtopic.php?f=4&t=4372

[rafcio21]

It works, thanks. I haven't searching enough.