0

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

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

现在，我正在将 ContentFlow 与 Lightbox Addon 一起使用（您可以在 ContentFlow 网站上找到它），但它只使用原始 Lightbox，所以我无法制作画廊（或者至少我不知道如何至）。

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

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

4

1 回答 1

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 很吸引人：

  1. 清除和重新填充流

  2. 只显示两张图片

  3. 圆形视图

  4. 一次推送10多张图片

于 2012-07-02T20:16:35.533 回答