我有一些数据库生成的html包含用户点击链接/缩略图时的图像我喜欢这些显示在fancybox中
如果缩略图在表格中，我想将它们分组到简单的图片库中，如示例here
如果它只是某个文字中某个图片的链接，我希望它在fancybox中显示为单个图像，就像其中一个＆＃34;不同的效果＆＃34;
但是，如果链接只是链接，那么它们应保持不受影响
我对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>
答案 0 :(得分：0)
我希望我理解你的问题，但基本上你想要的是：
为每个表分配不同的ID，以便该表内的图像链接（带缩略图）属于同一个图库。
在以下情况下，图片的任何链接都应获得class="fancybox-effects-d"或class="fancybox"：
fancybox-effects-d指向图片的链接在之外的表格和/或指向图片的链接没有缩略图，无论它们是否在桌面内。fancybox和图片链接的相同rel属性里面一个表（rel属性应与表的ID匹配，与其他表不同）AND 缩略图。因此，如果您有多个table，则每个table应该看起来像
<table id="img1"></table>
<table id="img2"></table>
然后table的每个 链接应如下所示：
<a class="fancybox-effects-d" href="image01.jpg"><img src="image01thumb.jpg" alt="" /></a>
<a class="fancybox-effects-d" href="image02.jpg">image 02</a>
<a href="http://example.com">link somewhere else</a>
和table内的 链接应如下所示：
<table id="img1">
<a class="fancybox" rel="img1" href="image03.jpg"><img src="image03thumb.jpg" alt="" /></a>
<a class="fancybox" rel="img1" href="image04.jpg"><img src="image04thumb.jpg" alt="" /></a>
<a class="fancybox-effects-d" href="image05.jpg">image 05</a>
<a href="http://example2.com">another link</a>
</table>
<table id="img2">
<a class="fancybox" rel="img2" href="image06.jpg"><img src="image06thumb.jpg" alt="" /></a>
<a class="fancybox" rel="img2" href="image07.jpg"><img src="image07thumb.jpg" alt="" /></a>
<a class="fancybox-effects-d" href="image08.jpg">image 08</a>
<a href="http://example3.com">another link</a>
</table>
如果以上所有内容都正确，那么您可以简化脚本，如：
$(document).ready(function() {
// assign a different ID to each table
$('table').each(function(i){
$(this).attr('id', 'img'+(i+1));
});
// go through all <a> tags
$('a').each(function(i){
// get the parent tag name
var parentTag = $(this).parents()[0].nodeName;
// detect if link has thumbnail
var hasThumb = $(this).children().html();
// detect if the link targets to an image, otherwise ignored
if(this.href.match(/\.(jpe?g|gif|png|bmp)((\?|#).*)?$/i)){
// since the parent of an element inside a table is (should be) "TD"
// then evaluate if the link is inside a table
// AND it has a thumbnail
if(parentTag == "TD" && hasThumb != null){
// get the parent table's ID
var TabID = $(this).closest("table").attr("id");
// set the class and rel attributes
$(this).attr({"class":"fancybox","rel": TabID});
}else{
// if link to an image has not a thumbnail AND/OR is outside a table
$(this).addClass("fancybox-effects-d");
}
}
}); // each
}); // ready
您可以调整脚本以满足您的需求。
BTW，你的一个fancybox脚本的正确语法应该是：
$('.fancybox').fancybox({
helpers : {
css : {'background-color' : '#eee'}
}
});
（您省略了helpers选项）