Question

Does anyone out there know how to integrate ContentFlow (http://www.jacksasylum.eu/ContentFlow) and Lightbox2 (http://lokeshdhakar.com/projects/lightbox2/)?

I need the ability for the image to not only open in a lightbox, but when opened, also have the user be able to the next and previous images.

Right now, I’m using ContentFlow with the Lightbox Addon (you can find this on the ContentFlow website), but that only uses the original Lightbox, so I can’t make a gallery (or at least I can’t figure out how to).

ContentFlow seems to be a pretty fickle product, and it doesn’t accept lots of things.

Thank you all for your help and please comment!

Answer 1

On official site of ContentFlow there is AJAX section,
and example of how it should be used : http://www.jacksasylum.eu/ContentFlow/ajax_example.inc.php.

Main idea is that all those images are processed in a single place.

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 is callback function to be called when images are done loading.

You can group them in a hidded div according to the structure lightbox would expect.

I am using it with the callback from 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();
            }
        });
    }
}

Usage :

$.preloadImages(imagesArray, function () {
    addPictures();
});

imagesArray in my case is array of relative path’s

Note that ContentFlow is catchy with:

1. clearing and repopulating the flow

2. showing only two images

3. circular view

4. pushing more than 10 images at once