Question

我正在使用着名且优秀的jQuery Colorbox作为图库。部分图像正在使用ajax添加到页面中。我正在尝试将colorbox绑定到页面上的所有新图像和现有图像，并将所有图像组合在一起。现在，我成功地只实现了两者中的一个。使用此代码，所有图像都可以很好地组合到一个颜色框库中，但在向页面添加更多图像后（通过ajax），颜色框根本没有绑定到它们：

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

使用此代码，在向页面添加更多图像后，图像被绑定到颜色框，但是rel分组不起作用（甚至不是首先加载到页面的图像集）：

$('a.exhibition').live('click', function() {
    $.fn.colorbox({
        inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true,      
        rel:"hpexhibition"
    });
    return false;
});

我也试过这段代码，但它是一样的 - 图像很好地绑定到彩盒，但作为单个图像，而不是（rel）图库：

$("ul#home-exhibition").on("click", "a[rel='hpexhibition']", function (event) {
    event.preventDefault();
        $.colorbox({
            inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true, 
        rel:"hpexhibition"                
         });
});

图片库的html标记是：

<ul id="home-exhibition">       
    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="3" href="#artitem-cb-details-3">
            <img src="path/to/image53.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-3" class="artitem-cb">
            //Some data of image 3 here...
          </div>    
        </div>
    </li>

    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="4" href="#artitem-cb-details-4">
            <img src="path/to/image4.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-4" class="artitem-cb">
            //Some data of image 4 here...
          </div>    
        </div>
    </li>

    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
</ul>

有没有办法将这两个结合起来，这样colorbox可以用于页面上的所有图像 - 也是通过ajax添加的图像 - 并且还将所有图像组合在一起？我不能做这个工作。我相信应该有办法让它发挥作用。

Answer 1

可能有效的方法需要您在加载新元素后重新初始化您的颜色框。

换句话说，你必须这样做：

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

在ajax调用完成后

。

查看colorbox的代码我没有看到其他简单的方法来处理你的情况。

Answer 2

把它代替$（'。colorbox'）。colorbox（）;

$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});

Answer 3

我的解决方案

  // This is the trick. Initialize but don't open
  $('.colorbox').colorbox({open:false, rel:'gallery'});

  // Handle click event    
  $('.colorbox').live('click',function(e){
     $(this).colorbox({open:true, rel:'gallery'}); // now open colorbox
     return false;
  });

使用元素分组的livebox绑定将无法正常工作

3 个答案: