Question

我在一个页面上放置两个单独的画廊时遇到了麻烦。加载屏幕时，一个图库看起来没问题（第一个图像，拇指和左/右箭头）。但是，只有左/右箭头显示在第二个库中。当我点击任何箭头（从第一个画廊或第二个画廊）时，它会清除图像，但拇指和箭头仍在那里。有时单击箭头会卡在加载程序gif图像上，图像无法显示。我正在使用jQuery Exposure Plugin演示4.我在这里做错了什么？

<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'});
});

Answer 1

首先修复重复的id属性。每个id属性在页面中应该是唯一的，重复的id属性可能会导致各种奇怪和混乱的行为。

在您的情况下，您有两个<div id="exposure">元素，但您的第二个图库正在寻找<div id="exposure2">：

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

你的第二个画廊试图将自己绑定到第一个画廊时不存在的东西：

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

正试图将自己绑定到两个具有相同<div>的{{1}}个。{/ p>

jQuery Exposure插件：多个画廊

1 个答案: