Contentflow and Lightbox 2

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!

Answers


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


Need Your Help

how to get one form value inside another form action in spring mvc

java spring spring-mvc spring-annotations

Am using spring mvc i have two forms in a single jsp version am using is spring 3.1.2

Get keyword from a (search engine) referrer url using PHP

php url preg-match keyword

I am trying to get the search keyword from a referrer url. Currently, I am using the following code for Google urls. But sometimes it is not working...