Question

我有一个小画廊：

大照片
底部略显拇指

当用户点击拇指时，大照片会发生变化，非常棒。

现在我已经在大照片上添加了Colorbox插件，所以当用户点击大照片时，他会看到一个更大的照片，这是有效的。但是当用户首先点击一些拇指然后他们点击ColorBox加载的大照片但不加载我添加的设置。

这是我的js ：

$(function() {
$("#wrapper #right #detail #photo #big #image a").colorbox({
    transition: 'elastic',
    speed: 200,
    opacity: 0.4,
    scalePhotos : true,
    maxWidth : '800px'
});

$("#wrapper #right #detail #photo ul li .thumb").click(function() {
    var image = $(this).attr("rel");
    $('#image').hide();
    $('#image').fadeIn('fast');
    $('#image').html('<a href="' + image + '" class="cboxElement" title=""><img src="' + image + '" alt="" /></a>');
    return false;
});
});

以及HTML ：

<div id="photo">
<div id="big"><div id="image"><a href="gfx/detail/1.jpg"><img src="gfx/detail/1.jpg" border="0"/></a></div></div>

<ul>
    <li><a href="#" rel="gfx/detail/1.jpg" class="thumb"><img src="gfx/detail/1.jpg" alt="" /></a></li>
    <li><a href="#" rel="gfx/detail/2.jpg" class="thumb"><img src="gfx/detail/2.jpg" alt="" /></a></li>
    <li><a href="#" rel="gfx/detail/3.jpg" class="thumb"><img src="gfx/detail/3.jpg" alt="" /></a></li>
</ul>
</div>

有人可以帮助我，以便彩盒加载设置吗？

Answer 1

$("#wrapper #right #detail #photo #big #image a")
$("#wrapper #right #detail #photo ul li .thumb")

不需要这么长的选择器，你会失去性能。 #是ID选择器，ID必须是唯一的，这就是您可以删除#wrapper #right #detail

的原因

您替换附加颜色框选项的元素，问题在于此级别，作为您可以绑定click的解决方案。像这样：

$('#image').on('click', 'a', function(e){
   e.preventDefault();
   $.colorbox({
       transition: 'elastic',
       href: this.href,
       speed: 200,
       opacity: 0.4,
       scalePhotos : true,
       maxWidth : '800px'
   });
});

ColorBox与画廊

1 个答案: