FANCYBOX中的圖像複製

Question

第一張圖像正在複製。 單擊作爲圖像的目標後，Photo1和Photo3之前Photo1會顯示兩次。

腳本：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".fancybox5") 
    .attr('rel', 'gallery') 
    .fancybox({ 
    openEffect: 'elastic', 
    prevEffect: 'fade', 
    nextEffect: 'fade' 
}); 
}); 
</script> 

HTML標記：

<div>  
<a class="fancybox5" href="#inline5"> <div id="pics"><img src="images/pic.png" width="165" height="167" alt="Pics" border="0" /></div></a> 
<div id="inline5" style="width:100%;display: none;"> 
    <a class="fancybox5" href="media/photo3.jpg"><img src="media/photo3.jpg" width="400" height="500" /></a> 
    <div class="hidden"> 
    <a class="fancybox5" href="media/photo1.jpg"><img src="media/photo1.jpg" width="400" height="500" /></a> 
    <a class="fancybox5" href="media/photo2.jpg"><img src="media/photo2.jpg" width="400" height="500" /></a> 
    </div> 

    </div> 
    </div> 

Answer 1

你並不需要爲目標的在線內容既不是你必須使用隱藏的DIV中的縮略圖。在可見的鏈接目標的第一張照片只有那麼調整你的HTML這樣

<div> 
    <a class="fancybox5" href="media/photo1.jpg"><img src="media/photo1.jpg" width="400" height="500" /></a> 
    <div id="inline5" style="display: none;"> 
     <a class="fancybox5" href="media/photo3.jpg"></a> 
     <a class="fancybox5" href="media/photo2.jpg"></a> 
    </div> 
</div> 

這個腳本應該工作

$(document).ready(function() { 
    $(".fancybox5") 
     .attr('rel', 'gallery') 
     .fancybox({ 
     openEffect: 'elastic', 
     prevEffect: 'fade', 
     nextEffect: 'fade' 
    }); 
});