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
Post a Comment