内容流和灯箱 2答案

【问题标题】：Contentflow and Lightbox 2内容流和灯箱 2
【发布时间】：2012-06-13 16:19:35
【问题描述】：

有没有人知道如何集成 ContentFlow (http://www.jacksasylum.eu/ContentFlow) 和 Lightbox2 (http://lokeshdhakar.com/projects/lightbox2/)？

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

现在，我正在将 ContentFlow 与 Lightbox 插件一起使用（您可以在 ContentFlow 网站上找到它），但它只使用原始 Lightbox，所以我无法制作图库（或者至少我不能弄清楚如何做）。

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

感谢大家的帮助，欢迎评论！

【问题讨论】：

标签： lightbox javascript lightbox2

【解决方案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 张图片

【讨论】：