【发布时间】：2012-05-27 05:12:35
【问题描述】：
当用户单击链接/缩略图时，我有一些数据库生成的 html 包含图像，我希望这些图像显示在花式框中
如果缩略图在表格中，我想将它们分组到一个简单的图片库中，例如示例 here
如果它只是某个文本中图像的链接，我希望它在幻想框中显示为单个图像，就像“不同效果”之一一样
但是，如果链接只是链接，那么它们应该不受影响
我对 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>
【问题讨论】：
-
那么，你不能事先添加
fancybox类吗？ -
不幸的是，并非没有执行复杂的 SQL 语句来更新存储在数据库中的 HTML
-
关于“添加缩放功能”，fancybox 按钮助手包括一个按钮，当图像被缩小以适合视口时，可以查看图像的实际大小
-
你指的是尺寸切换吗？