Question

有没有人知道如何整合ContentFlow（http://www.jacksasylum.eu/ContentFlow）和Lightbox2（http://lokeshdhakar.com/projects/lightbox2/）？

我需要图像的功能不仅可以在灯箱中打开，而且在打开时，还可以让用户能够使用下一张和以前的图像。

现在，我正在将ContentFlow与Lightbox Addon一起使用（你可以在ContentFlow网站上找到它），但那只使用原来的Lightbox，所以我不能创建一个画廊（或者至少我不能弄清楚如何）。

ContentFlow似乎是一个非常易变的产品，它不接受很多东西。

谢谢大家的帮助，请发表评论！

Answer 1

在ContentFlow的官方网站上有AJAX部分，以及如何使用它的示例：http://www.jacksasylum.eu/ContentFlow/ajax_example.inc.php。

主要思想是所有这些图像都在一个地方进行处理。

var ajax_cf = new ContentFlow('ajax_cf', 
...

function addPictures(t){
        var ic = document.getElementById('itemcontainer');
        var is = ic.getElementsByTagName('img');
        for (var i=0; i< is.length; i++) {
            ajax_cf.addItem(is[i], 'last');
        }
}

appPictures是在加载图像时调用的回调函数。

您可以根据灯箱预期的结构将它们分组到一个隐藏的div中。

我正在使用jquery preloader的回调

jQuery.preloadImages = function () {
    if (typeof arguments[arguments.length - 1] == 'function') {
        var callback = arguments[arguments.length - 1];
    } else {
        var callback = false;
    }
    if (typeof arguments[0] == 'object') {
        var images = arguments[0];
        var n = images.length;
    } else {
        var images = arguments;
        var n = images.length - 1;
    }
    var not_loaded = n;
    for (var i = 0; i < n; i++) {
        jQuery(new Image()).attr('src', images[i]).load(function () {
            if (--not_loaded < 1 && typeof callback == 'function') {
                callback();
            }
        });
    }
}

用法：

$.preloadImages(imagesArray, function () {
    addPictures();
});

在我的情况下，imagesArray是相对路径的数组

请注意，ContentFlow很吸引人：

清理并重新填充流程
仅显示两张图片
圆形视图
一次推送10多张图片

Contentflow和Lightbox 2

1 个答案: