現在、以下のコードは私の画像をグレースケールで表示し、ホバーするとカラーで表示されます。画像にもう 1 つの関数を追加する必要があります。ホバーすると、Fancybox ギャラリーへのリンクになる必要があります。それをコーディングする方法がわかりません。注: リスト タグには、サムネイルのグレー バージョンとカラー バージョンがあります。セクション タグには、リンクしたい実際のフル サイズ バージョンがあります。
これは、私の完全な (建設中の) サイトへのリンクです。
<!--gray to color on hover code-->
<script type='text/javascript'>
$(document).ready(function(){
$("img.waldengray").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<!--generic fancybox code-->
<script type='text/javascript'>
$(document).ready(function(){
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
<body>
<!--gray and color thumbnails-->
<ul>
<li><img src="images/waldengray.png" alt="waldengray" width="362" height="105" `class="waldengray" id="waldengray"></li>`
<li><img src="images/waldencolor.png" alt="waldencolor" width="362" height="105" class="waldencolor" id="waldencolor"></li>
</div>
</ul>
<!--full size image-->
<section>
<p><a class="fancybox-walden" data-fancybox-group="walden" href="images/waldenlrg.png"><img src="images/waldenlrg.png" alt="" /></a></p>
</section>
</div><!--wrapper-->
</body>
</html>