My ImageFlow with Lightbox packaged sample

Per a request from Clemens to my last post, I've packaged my revised version of ImageFlow and Lightbox2. In addition, I've made my sample application issue an Ajax request to get the list of images to demonstrate how you can dynamically build the photo album. Here is the code:

// sample application
var MyApp = function() {
 var imgTemplate = new Template('<img alt="#{caption}" longdesc="javascript:LightBoxLite.displayImage(\'#{filename}\')" src="reflect.php?img=#{filename}" />');

    function initializeAlbum(response) {
        var imageList;
        var imgHTML = '';

        try {
            imageList = response.responseJSON; 
        } catch (e) {
            console.error(e, "\n", response.responseText);
        }

        // IE bug : for all other browsers an imageList.each() works great here,
        // however IE doesn't like it so we revert to a for loop
        for (var i = 0; i < imageList.length; i++) {
            var filename = imageList[i];
            // IE bug : IE computes an incorrect value for imageList.length resulting 
            // in undefined filenames in the loop, check for that
            if (filename) {
                // for simplicity, extract the base filename for the caption.  
                // Caption could also be defined for each image in the JSON response data.
                var caption = filename.split('/').pop().split('.')[0].gsub("%20", " ");
                imgHTML += imgTemplate.evaluate({filename : filename, caption : caption});
            }
        }

        $('images').innerHTML = imgHTML;
        // IE bug : IE needs a moment to let the innerHTML change register before proceeding
        // so we add a small timeout to let it catch its breath
        setTimeout(ImageFlow.initialize, 10);
    }

    return {
        loadAlbum : function(albumName) {
            $('startButton').hide();
            $('photoAlbum').show();
            var myAjax = new Ajax.Request('imageList.php?albumName=' + albumName, {
                method: 'get',
                onSuccess: initializeAlbum
                });
        }
    };

}();

The initial button you see in the sample application, invokes the loadAlbum() function when clicked as shown:

<input type="button" value="Click here to load photo album" onclick="MyApp.loadAlbum('FlickrEyeCandy');"></input>

Download the packaged sample application shown below. Update January 23, 3pm EST: It was reported that the sample application didn't work in IE. This was due to some deficiencies in IE which I have accounted for now. I have pointed them out in the code with the comments beginning with IE bug

ImageFlow with Lightbox Lite

I like the idea of using ImageFlow with Lightbox2, however, I don't like that it required a tweaked version of ImageFlow, nor that I then had to modify my image list to wrap the Lightbox2 elements around them. Additionally, Lightbox2 adds a lot of functionality that's not being using in this case (all the next/previous image controls, image caching, etc), and it also wants to initialize itself during the window.onload event which I don't want in my Ajax apps.

So, wrote my own Lightbox Lite. Well, technically, I extracted my own Lightbox Lite from the Lightbox2 code with a few modifications.

To begin with, I added this block of HTML to my web page. The Lightbox2 code constructs this dynamically in its initialize function, but I don't see the advantage of that vs just hard coding it into the page to begin with.

<div id="photo" style="display:none">
    <div id="lightbox">
    <div id="outerImageContainer">
        <div id="imageContainer">
            <img id="lightboxImage" style="display:none"></img>
            <div id="imageloading">
                <img src="images/loadingImage.gif">
            </div>
        </div>
    </div>
    <div id="imageDataContainer" style="display:none">
        <div id="imageData">
             <div id="imageDetails">
                 <span id="imagecaption"></span>
             </div>
             <div id="imageBottomNav" onclick="LightBoxLite.reset();" style="float:right" >
                 <img src="images/close-button.png" alt="Close" title="Close">
             </div>
        </div>
    </div>
    </div>
</div>

Then I added the relevant CSS rules to my stylesheet:

#photo {
 z-index: 51;
 position: absolute;
 top: 5px;
 left: 1px;
 width: 100%;
}

#outerImageContainer {
 background-color: white;
 width: 250px;
 height: 250px;
 margin: 0 auto;
}

#imageContainer {
 padding-top: 10px;
}

#imageloading {
 position: absolute;
 top: 40%;
 left: 47.5%;
}

#imageDataContainer {
 font: 10px Verdana, Helvetica, sans-serif;
 background-color: white;
 margin: 0 auto;
 line-height: 1.4em;
 overflow: auto;
 width: 100%;
 padding-bottom: 5px;
}

#imageData {
 padding: 0 10px;
 color: #666;
}

#imageData #imageDetails {
 width: 80%;
 float: left;
 text-align: left;
}

#imageData #imageCaption {
 font-weight: bold;
}

Next I added the Lightbox Lite code to my JavaScript (note, you still need prototype.js and script.aculo.us):

LightBoxLite = function() {
    
    var borderSize = 10;
    var resizeDuration = 0.6;
    
    /**
     * resizeImageContainer
     *
     * @param {Number} desired width
     * @param {Number} desired height
     */
    function resizeImageContainer( imgWidth, imgHeight) {

        // get current width and height
        var widthCurrent = $('outerImageContainer').getWidth();
        var heightCurrent = $('outerImageContainer').getHeight();

        // get new width and height
        var widthNew = (imgWidth  + (borderSize * 2));
        var heightNew = (imgHeight  + (borderSize * 2));

        // scalars based on change from old to new
        var xScale = ( widthNew / widthCurrent) * 100;
        var yScale = ( heightNew / heightCurrent) * 100;

        // calculate size difference between new and old image, and resize if necessary
        var wDiff = widthCurrent - widthNew;
        var hDiff = heightCurrent - heightNew;

        if (!( hDiff === 0)) {
            new Effect.Scale('outerImageContainer', yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); 
        }
        if (!( wDiff === 0)) {
            new Effect.Scale('outerImageContainer', xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); 
        }

        $('imageDataContainer').style.width = widthNew + "px";

        showImage();
    }
    
    /**
     * updateDetails
     * 
     */
    function updateDetails() {
        var caption = $('lightboxImage').src.split('/').pop().split('.')[0].gsub("%20", " ");
        $('imagecaption').innerHTML = caption; 
        
        new Effect.Parallel(
            [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), 
              new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ] 
        );
    }
    
    /**
     * showImage
     * Display image and begin preloading neighbors.
     */
    function showImage() {
        $('imageloading').hide();
        new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: updateDetails });
    }
    
    function checkForPreloadComplete(imgPreloader) {
        if (imgPreloader.complete) {
            $('lightboxImage').src = imgPreloader.src;
            resizeImageContainer(imgPreloader.width, imgPreloader.height);
        } else {
            setTimeout(checkForPreloadComplete.bind(this, imgPreloader), 100);
        }
    }
    return {
        /**
         * displayImage
         * display an image in a lightbox
         *
         * @param {String} URL of image
         */
        displayImage : function(imageUrl) {
            $('imageloading').show();
            $('lightboxImage').hide()
            $('imageDataContainer').hide()
            $('photo').show();

            var imgPreloader = new Image();
            imgPreloader.src = imageUrl;

            // once image is preloaded, resize image container
            setTimeout(checkForPreloadComplete.bind(this, imgPreloader), 100);
        },
        
        reset : function() {
            $('photo').hide();
            $('imageloading').show();
            $('lightboxImage').hide()
            $('imageDataContainer').hide()
            $('lightboxImage').src = "";
            $('outerImageContainer').style.width = "250px";
            $('outerImageContainer').style.height = "250px";
            
            
        }
    };
}();

The only alteration you have to do to your ImageFlow images is to add a call to the LightBoxLite.displayImage function in the longdesc attribute of your images, which should currently have the address of the original image to display when you click on it in the image flow. So, instead of:

<img src="reflect.php?img=myimage.jpg" longdesc="myimage.jpg" alt="myimage" />

It becomes:

<img src="reflect.php?img=myimage.jpg" longdesc="javascript:LightBoxLite.displayImage('myimage.jpg')" alt="myimage" />

Here is an example of it being used.

Update January 20: I tweaked a couple CSS rules to correctly center the loading indicator for Internet Explorer.

Update January 23: I received a request to package my modifications. See my new blog entry where I have done that in addition to demonstrating how to add Ajax to receive the image list.

ImageFlow (improved)

Finn Rudolph has created a very nice "cover flow" type of control in JavaScript called ImageFlow (which is an improvement of Michael L. Perry's Cover flow).

It's a very nice package and quite easy to use! However, it currently has a few code shortcomings. My primary issues with it was that it defined everything in a global scope (with common names that easily clash with other functions) and that it assumes the photos are in a static page and thus initializes itself when the web page loads. The later issue was the biggest thing I needed to fix since I wanted to use it in an Ajax application where I'm getting the images as a result of an XMLHttpRequest.

• I added an "ImageFlow" scoping around the whole package so that all the variables and particularly the functions aren't global to my whole application (and potentially clashing).


• I added "var" declarations for many of the variables which didn't specify "var" so that they would not become fully global variables, but only global to the ImageFlow scope.


• I changed the "onload" function to be an "initialize()" function so that I could execute it when my page was ready


• I made all the variables and functions totally private to ImageFlow with the only publicly visible function being "intialize()"


• Since the images in the image flow div are now loaded sometime after the page is loaded, I added a check to the initialize function determine when all images are really loaded (otherwise some would be sized wrong).

Now, whenever you're ready for the ImageFlow to be displayed, just call "ImageFlow.initialize()"

If you're interested in these updates, you can download my altered imageflow.js. I have also submitted them to Finn, so hopefully they will be adopted into the official version.

NOTE: The file was updated on January 18, 10:00am EST after running it through JSLint -- which I should have done before posting it originally.

Update January 18: I've added a new article describing the addition of a scaled down version of Lightbox2 without modifying ImageFlow.