Question

我正在使用手动彩盒调用：

$('a[rel="example1"]').click(function(event){

                    event.preventDefault();

                    $.colorbox({
                        href: $(this).attr('href'),
                        maxWidth: '90%',
                        initialWidth: '200px',
                        initialHeight: '200px',
                        speed: 700,
                        overlayClose: false
                    });
                });

我必须以这种方式使用它才能不干扰另一个插件（这是我能让它工作的唯一方法）。

问题是当模态弹出时，它没有组中的其他图像或锚点，因此没有“下一个”或“前一个”选项。

有关如何解决此问题的任何想法？

Answer 1

您可以在调用colorbox时手动设置要组合在一起的元素的rel：

$('a[rel="example1"]').click(function(event){

    event.preventDefault();

    $.colorbox({
        href: $(this).attr('href'),
        maxWidth: '90%',
        initialWidth: '200px',
        initialHeight: '200px',
        speed: 700,            
        overlayClose: false,
        rel: $(this).attr('rel')
    });
});

修改

我在colorbox源中进行了更多的挖掘，并且它不起作用的原因是因为共享相同rel的其他链接没有为它们创建关联的颜色框对象。以下工作，但它不是一个非常黑客...它可能无法解决您的其他插件问题：

$('a[rel="example1"]').click(function(event){ event.preventDefault(); // Build up the list of related colorbox objects $('a[rel="example1"]').colorbox({ maxWidth: '90%', initialWidth: '200px', initialHeight: '200px', speed: 700, overlayClose: false }); // Open the specific link's colorbox $.colorbox({ href: $(this).attr('href') }); });

Answer 2

我在点击时创建jQuery颜色框的解决方案：

$(function(){
    $('#some-images-container a[rel="gallery"]').live('click', function(){
        var $this = $(this);
        var rel = $this.attr('rel');

        // Build colorbox sequence
        $this.closest('div') // parent container
            .find('a[rel="'+rel+'"]').colorbox({ // find all matching items & init colorbox on them
                    open: false, // don't open, just init
                    rel: rel // use the rel
                }
        });

        // Open the specific link's colorbox
        $this.colorbox({open: true});
        return false; // prevent
    });
});

Answer 3

唯一的问题是您没有为颜色框设置 rel 属性。

Jquery colorbox：点击初始化图库

3 个答案: