0

ContentFlow（http://www.jacksasylum.eu/ContentFlow）とLightbox2（http://lokeshdhakar.com/projects/lightbox2/）を統合する方法を知っている人はいますか？

画像をライトボックスで開くだけでなく、開いたときにユーザーが次の画像や前の画像を開くことができるようにする機能が必要です。

現在、私はライトボックスアドオンでContentFlowを使用しています（これはContentFlow Webサイトで見つけることができます）が、元のライトボックスのみを使用しているため、ギャラリーを作成できません（または少なくとも方法がわかりません）に）。

ContentFlowはかなり気まぐれな製品のようで、多くのものを受け入れません。

助けてくれてありがとう、コメントしてください！

4

1 に答える 1

1

ContentFlowの公式サイトにはAJAXセクションがあり、その使用方法の例はhttp://www.jacksasylum.eu/ContentFlow/ajax_example.inc.phpです。

主なアイデアは、これらすべての画像が1か所で処理されることです。

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プリローダーからのコールバックで使用しています

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. 2つの画像のみを表示

  3. 円形ビュー

  4. 一度に10枚以上の画像をプッシュ

于 2012-07-02T20:16:35.533 に答える