Image Duplication in FANCYBOX -


the first image duplicating. after clicking on target image, photo1 displays twice before photo2 , photo3.

script:

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

html markup:

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

you don't need target inline content neither have use thumbnails inside hidden div. target first picture in visible link tweak html way

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

and script should work

$(document).ready(function () {     $(".fancybox5")         .attr('rel', 'gallery')         .fancybox({         openeffect: 'elastic',         preveffect: 'fade',         nexteffect: 'fade'     }); }); 

Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -