当用户单击链接/缩略图时，我有一些数据库生成的包含图像的 html，我希望这些图像显示在花式框中
如果缩略图在表格中，我想将它们分组到一个简单的图片库中，就像这里的例子一样
如果它只是某些文本中图像的链接，我希望它在幻想框中显示为单个图像，就像“不同效果”之一
但是，如果链接只是链接，那么它们应该不受影响
我对 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>