Tuesday, January 22, 2008

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

18 comments:

  1. Anonymous10:45 AM

    Don't function under Internet Explorer !

    ReplyDelete
  2. The ImageFlow and LightBox Lite code works in IE (as demonstrated on the site I originally did this work for), but the simple sample application is having some issues with the JSON in IE.

    I'll fix it when I get some time.

    ReplyDelete
  3. hello

    nice to find this inmprovement with sorce code and lightbox 8-)

    I played with the perspective from ImageFlow:
    screenshoot http://a6000000.a6.ohost.de/CoverFlow/CoverFlow0.3003(460K).jpg
    please allow the popup http://a6000000.a6.ohost.de/CoverFlow/index.html
    and in Browser to resize http://a6000000.a6.ohost.de/CoverFlow/index.htm

    here are sam other CoverFlow ImageFlow PictureFlow AlbumFlow cources
    maybe you wanna play in flash
    http://www.video-flash.de/index.php/ubersicht-coverflow-effekt-in-flash-und-flex/
    http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/
    http://www.google.de/search?q=CoverFlow+source&hl=de&client=firefox-a&rls=org.mozilla:de:official&start=10&sa=N

    greating from Berlin
    .

    ReplyDelete
  4. Anonymous4:54 AM

    thanks a lot for the "ImageFlow with Lightbox packaged sample"!

    now i'm able to do this well - results will be shown in a while ...

    with some from-berlin-greetings too ;-)

    ReplyDelete
  5. on IE second and every other try to show image with lightbox does not work, image gets bigger and bigger margin from top

    ReplyDelete
  6. Can you give your comments? i did page from your example, but it does not work correctly with IE take a look. try clicking few times on pictures...

    ReplyDelete
  7. http://www.ingajankauskaite.com/galerija.html

    ReplyDelete
  8. Anonymous6:49 PM

    Thanks for this Steven. I think you are maybe aware but in IE7/Vista if you call lightbox more than 3 or 4 times its starts getting a little funky and fails to load the images thereafter.. Have you any pointers to a possible fix further than IE's handling of the JSON? This doesn't make much sense to me.

    ReplyDelete
  9. Anonymous5:26 PM

    There still seems to be a bug in IE7: 3rd or 4th call of the lightbox throws a wobbly and either displays the lightboxImage out of the container or fails to load the image!

    Like an idiot, I got a bit too excited and implemented before testing... it might be worth noting on your blog. Hopefully someone smarter than me will work a fix!

    If you have any pointers pls let me know.

    cheers

    ReplyDelete
  10. Anonymous11:46 AM

    Hello,
    Does anybody know where the IE working code could be found. I implemented the sample on a site and it gives me the IE margin issue it does not behave as the demo on this page.
    I saw other people asked for that too. Was there another link to download the code that's working in IE.
    Thanks,

    ReplyDelete
  11. I will investigate these problems. If anyone has encountered the problems and has any helpful information to isolate the problem, please report it.

    ReplyDelete
  12. Anonymous6:02 AM

    Love the code but it doesnt work
    IE wont load at all and chrome lightbox works but just blank squares in flow?
    Someone dig me out...

    ReplyDelete
  13. Anonymous6:53 AM

    paytonvision@hotmail.com

    email me if you can help me with getting this working

    thanks

    ReplyDelete
  14. Steven,

    IE7/8 botches the litebox call after a couple of calls - this suggest a memory leakage in IE>JSON. Remember reading some similar botching related to IE's *imagetoolbar* that could solve the issue.

    try using:
    <
    META HTTP-EQUIV="imagetoolbar" CONTENT="no">

    and use the:

    galleryimg="no"

    attribute for each image tag (or in this case, each DOM image node)

    Cheers

    BAC

    ReplyDelete
  15. Thanks for the suggestions!

    ReplyDelete
  16. IE7, problem where imageflow would hang at loading images screen. changed imageflow.js line 395 from:
    if (! ready) {
    to
    if (!ready) {

    and it works now. Not sure if anyone else ran into this problem but you never know :)

    ReplyDelete
  17. Hi!
    Thank you for that script, works perfectly! But now i would like to edit the visualization of the slide: I would like to remove the slide under the images, i've tried to add "slider: false," after the initialization of the album, but it doesn't work...
    (Here there are lot of examples: http://finnrudolph.de/ImageFlow/Examples )
    Thanks,
    Alberto

    ReplyDelete
  18. I tested this script out in Safari 4.0.5 and Google Chrome 5.0.375.55, and the lightbox has errors creating the correct white box background for the image: sometimes too big or too small.

    http://www.healthy3.limewebs.com/ImageFlow_LightBox/

    This is obviously something to do with your reduced lite script. I shall put the original back in and try that.

    ReplyDelete