4

我正在为画廊使用众所周知且优秀的 jQuery Colorbox。部分图像正在使用 ajax 添加到页面中。我正在尝试将颜色框绑定到页面上的所有新图像和现有图像，并将所有图像组合在一起。现在，我只成功实现了两者之一。使用此代码，所有图像都很好地组合到一个颜色框库中，但是在向页面添加更多图像（通过 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>

有没有办法将这两者结合起来，以便颜色框适用于页面上的所有图像 - 也包括通过 ajax 添加的图像 - 并且还将所有这些图像组合在一起？我无法完成这项工作。我相信应该有办法做到这一点。

4

3 回答 3

8

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

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

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

ajax调用完成后。

查看 colorbox 的代码，我没有看到其他简单的方法来处理您的案例。

于 2012-08-07T10:45:37.993 回答
1

把这个代替 $('.colorbox').colorbox();

$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});
于 2013-08-03T12:08:49.693 回答
0

我的解决方案

  // 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;
  });
于 2014-01-18T11:12:47.093 回答