以下のコードで fancyBox バージョン: 2.1.5 を使用しています。
ギャラリーは完全に機能し、どの画像から始めても問題なく初期化されます。
ただし、どの画像からギャラリーを開始しても、その画像 (およびその画像のみ) にはタイトルが表示されません。他のすべての画像にはタイトルが正しく表示されていますが、画像をもう一度見ていくと、どの画像から始めてもタイトルが消えてしまいます。
ショーを開始する画像でタイトルを機能させる方法を知っている人はいますか?
私のコード:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="scripts/jquery-ui/css/actonians-jqui/jquery-ui-1.10.1.custom.css" type="text/css">
<script src="scripts/jquery/jquery-1.9.0.js" type="text/javascript"></script>
<script src="scripts/jquery-ui/js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen">
<script src="scripts/fancyBox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".fancybox").fancybox({
wrapCSS : "fancybox-custom",
closeClick : true,
closeEffect: "fade",
openEffect : "fade",
helpers : {
title : {
type : "inside"
},
overlay : {
css : {
"background" : "rgba(160,160,160,0.65)"
}
}
}
});
});
</script>
</head>
<body>
<h1>Gallery</h1>
<p>Click an image below to view full size as a slideshow</p>
<div class="img_gallery">
<ul>
<li>
<a class="fancybox" data-fancybox-group="gallery1" href="photos/001.jpg" title="Title 1">
<img src="photos/thumbs/001.jpg" alt="Title 1">
</a>
</li>
<li>
<a class="fancybox" data-fancybox-group="gallery1" href="photos/002.jpg" title="Title 2">
<img src="photos/thumbs/002.jpg" alt="Title 2">
</a>
</li>
<li>
<a class="fancybox" data-fancybox-group="gallery1" href="photos/003.jpg" title="Title 3">
<img src="photos/thumbs/003.jpg" alt="Title 3">
</a>
</li>
</ul>
</div>
</body>
</html>