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:
Don't function under Internet Explorer !
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.
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
.
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 ;-)
on IE second and every other try to show image with lightbox does not work, image gets bigger and bigger margin from top
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...
http://www.ingajankauskaite.com/galerija.html
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.
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
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,
I will investigate these problems. If anyone has encountered the problems and has any helpful information to isolate the problem, please report it.
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...
paytonvision@hotmail.com
email me if you can help me with getting this working
thanks
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
Thanks for the suggestions!
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 :)
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
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.
Post a Comment