最初の画像は複製中です。画像であるターゲットをクリックすると、Photo1 が Photo2 と Photo3 の前に 2 回表示されます。
脚本:
<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>