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:

Anonymous said...

Don't function under Internet Explorer !

Steven Pothoven said...

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.

a6000000 said...

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
.

Anonymous said...

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 ;-)

Unknown said...

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

Unknown said...

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...

Unknown said...

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

Anonymous said...

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.

Anonymous said...

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

Anonymous said...

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,

Steven Pothoven said...

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

Anonymous said...

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...

Anonymous said...

paytonvision@hotmail.com

email me if you can help me with getting this working

thanks

BAC said...

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

Steven Pothoven said...

Thanks for the suggestions!

nomnomnom said...

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 :)

Alberto Zanatta said...

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

Unknown said...

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.