ユーザーがリンク/サムネイルをクリックしたときに画像を含むデータベースで生成されたhtmlがあり、これらをファンシーボックスに表示したい
サムネイルがテーブルにある場合、ここの例のようにシンプルな画像ギャラリーにグループ化したいと思います
テキスト内の画像へのリンクにすぎない場合は、「さまざまな効果」の 1 つのように、ファンシーボックスに単一の画像として表示したいと思います。
ただし、リンクが単なるリンクである場合は、影響を受けないままにする必要があります
jquery セレクターに問題があります。誰かがエラーを指摘してください。
また、画像の別の大きなバージョンにリンクする必要なく、fancybox 内の画像にズーム機能を追加することは可能ですか?
<!DOCTYPE html>
<html>
<head>
<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.0.6" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript">
var iTabNum=0;
$(document).ready(function() {
$('a > img').each(function(){
if($(this).parent('table'))
{
var TabID;
if (typeof($(this).parent('table').attr('id')) == "undefined" )
{
iTabNum ++;
$(this).parent('table').attr('id', "img" + TabID + iTabNum);
}
else
{
TabID = "img" + $(this).parent('table').attr('id');
}
$(this).closest().attr('class', "fancybox");
$(this).closest().attr(TabID + '-group', "gallery" );
}
else
{
$(this).attr('class', "fancybox-effects-d");
}
});
$('.fancybox').fancybox({
overlay : {
css : {
// hover > img{width:100px;height:100px;z-index:1000;position:relative;top:-50px;left:-50px;},
'background-color' : '#eee'
}
}});
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
});
</script>
</head>
<body>
<div>
<table>
<tr>
<td><a href="1_b.jpg" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>
</td>
<td><a href="2_b.jpg" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>
</td>
</tr>
<tr>
<td><a href="3_b.jpg" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a></td>
<td><a href="4_b.jpg" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a></td>
</tr>
</table>
</div>
<div>
<h3>Etiam quis mi eu elit</h3>
<p>
Lorem ipsum dolor sit amet, <a href="http://fancyapps.com/fancybox/">www.fancyapps.com/fancybox/</a> consectetur adipiscing elit. Etiam <a href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">Image</a> quis mi eu elit tempor facilisis id et neque.
</p>
</div>
</body>
</html>