jQuery Exposure Plugin: Multiple Galleries

I'm having trouble placing two separate galleries on one page. One gallery appears okay when the screen is loaded (first image, thumbs and left/right arrows). However only the left/right arrows show up on the second gallery. When I click on any of the arrows (from the first gallery or second) it clears the image but thumbs and arrows still there. Sometimes clicking the arrows it gets stuck on the loader gif image and the image fail to appear. I'm using jQuery Exposure Plugin demo 4. What am 开发者_JAVA百科I doing wrong here?

<div id="main"><div id="exposure"></div><div class="clear"></div></div>
<div class="panel">
<div id="left"><a href="javascript:void(0);" onclick="$.exposure.prevImage();return true;"><img src="Exposure/left.png" alt="Previous" /></a></div>
    <ul id="images">
        <li><a href="photo1.jpg"><img src="photo1.jpg" /></a></li>
        <li><a href="photo2.jpg"><img src="photo2.jpg" /></a></li>
          </ul>
          <div id="right"><a href="javascript:void(0);" onclick="$.exposure.nextImage();return true;"><img src="right.png" alt="Next" /></a></div>
        </div>

<div id="main"><div id="exposure"></div><div class="clear"></div></div>
<div class="panel">
<div id="left"><a href="javascript:void(0);" onclick="$.exposure.prevImage();return true;"><img src="Exposure/left.png" alt="Previous" /></a></div>
    <ul id="images">
        <li><a href="photo3.jpg"><img src="photo3.jpg" /></a></li>
        <li><a href="photo4.jpg"><img src="photo4.jpg" /></a></li>
          </ul>
          <div id="right"><a href="javascript:void(0);" onclick="$.exposure.nextImage();return true;"><img src="right.png" alt="Next" /></a></div>
        </div>

jQuery:

<script type="text/javascript">
    $(function(){
        $('#images').exposure({target : '#exposure'});
        $('#images2').exposure({target : '#exposure2'});
});

Fix your duplicate id attributes first. Each id attribute should be unique within a page, duplicate id attributes can cause all sorts of strange and confusing behavior.

In your case, you have two <div id="exposure"> elements but your second gallery is looking for <div id="exposure2">:

$('#images2').exposure({target : '#exposure2'});

Your second gallery is trying to bind itself to something that does not exist while your first gallery:

$('#images').exposure({target : '#exposure'});

is trying to bind itself to two different <div>s that have the same id.