Contentflow and Lightbox 2

Question

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

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

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

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 - функция обратного вызова, вызываемая при загрузке изображений.

Вы можете сгруппировать их в квадрат с квадратом в соответствии со структурой, которую будет ожидать лайтбокс.

Я использую его с обратным вызовом из 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 изображений одновременно