Поток контента и лайтбокс 2

Кто-нибудь знает, как интегрировать ContentFlow (http://www.jacksasylum.eu/ContentFlow) и Лайтбокс2 (http://lokeshdhakar.com/projects/lightbox2/)?

Мне нужна возможность, чтобы изображение не только открывалось в лайтбоксе, но при открытии пользователь также мог открывать следующее и предыдущее изображения.

Прямо сейчас я использую ContentFlow с надстройкой Lightbox (вы можете найти это на веб-сайте ContentFlow), но он использует только оригинальный Lightbox, поэтому я не могу создать галерею (или, по крайней мере, я не могу понять, как к).

ContentFlow кажется довольно непостоянным продуктом, и он не принимает много вещей.

Спасибо всем за помощь и комментарии!


javascript lightbox lightbox2
person streetlight    schedule 13.06.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На официальном сайте 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

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 изображений одновременно

person Logic Wreck    schedule 02.07.2012