Image Duplication in FANCYBOX - fancybox

Question

The first Image is duplicating.
After clicking on target which is an image, Photo1 displays twice before Photo2 and 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>

Answer 1

You don't need to target the inline content neither you have to use thumbnails inside the hidden div. Target the first picture in your visible link only so tweak your html this 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 this script should work
$(document).ready(function () {
$(".fancybox5")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'elastic',
prevEffect: 'fade',
nextEffect: 'fade'
});
});