jQuery Exposure Plugin : Multiple Galleries

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

은 동일한 id을 가진 서로 다른 두 가지 <div>에 자체를 바인딩하려고 시도하고 있습니다.