我正在尝试自定义fancybox,以便当单击页面上显示的4 个图像之一时,这是在fancybox 窗口中加载的图像。
为此,我想使用 jquery .attr 函数将图像 src(作为变量)传递给主图像持有者。
我当前的 jquery 代码是:
jQuery(document).ready(function($) {
$("a.group").click(function() {
var image = $(this).attr("name");
$("#largeId").attr({ src: image});
$("a.group").fancybox({
'frameWidth':966,
'frameHeight': 547,
'hideOnContentClick': false,
'overlayOpacity': 0.85,
'callbackOnShow': function() {
$("#container ul#thumbnails li a").click(function(){
var largePath = $(this).attr("title");
$("#largeId").fadeOut("fast").hide();
$("#largeId").attr({ src: largePath });
$("#largeId").fadeIn("slow");return false;
});
$("#container ul#thumbnails li a").click(function(){
$('.active').removeClass('active');
$(this).addClass("active");
});
}
});
});
});
主页图像的 HTML 是:
<ul id="images">
<li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li>
<li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li>
<li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li>
<li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li>
</ul>
对于 Fancybox 窗口:
<div id="main_image">
<img id="largeId" src="" alt="" title="" />
</div>
- - - -编辑 - - - - -
只是让你知道,如果我一开始就去掉点击功能,这主要是有效的,fancybox 调用中的功能都可以正常工作。