ポートフォリオ セクションに Anythingslider + Fancybox を使用して、ウェブサイトを再構築中ですが、現在、同じ画像を 2 回複製しています。フォリオ セクションまで下にスクロールし、最初の画像をクリックしてください。
http://francisthedesigner.com/dev/
Anythingslider から取り出したとき、私を混乱させる画像を複製することなく、fancybox は正常に機能します。おわかりのように、私は JavaScript の問題を解決するのが得意ではありませんが、この問題を解決することに非常に熱心です。
役立つ場合は、HTML / JSコードを次に示します
<ul class="slider">
<li>
<a class="fancybox" rel="webfolio" href="images/folio/web_superjellyfish_b1.jpg">
<img src="images/folio/web_superjellyfish.jpg" alt="" />
</a>
<div class="caption-bottom">
<div>
<h3>Description</h3>
<p>An extract of my showreel about Go Up Communications’s works for fashion industry.</p>
</div>
<div>
<h3>Role</h3>
<p>Art Direction, Graphic Design, HTML5, CSS, Javascript, WP</p>
</div>
<div>
<h3>Client</h3>
<p><a href="http://francisthedesigner.com/superjellyfish/" target="_blank">Super Jellyfish</a></p>
</div>
</div>
<span class="capLeft"></span>
<span class="capRight"></span>
</li>
$(".fancybox").fancybox({ prevEffect : 'true', nextEffect : 'true',
closeBtn : true,
arrows : true,
nextClick : true,
helpers: {
title : {
type : 'outside'
},
overlay : {
speedIn : 500,
opacity : 0.95
},
thumbs : {
width: 75,
height: 50
},
title : {
type : 'inside'
},
//buttons : {}
}
});