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
Don't function under Internet Explorer !
ReplyDeleteThe 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.
ReplyDeleteI'll fix it when I get some time.
hello
ReplyDeletenice 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"!
ReplyDeletenow 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
ReplyDeleteCan 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...
ReplyDeletehttp://www.ingajankauskaite.com/galerija.html
ReplyDeleteThanks 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.
ReplyDeleteThere 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!
ReplyDeleteLike 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,
ReplyDeleteDoes 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.
ReplyDeleteLove the code but it doesnt work
ReplyDeleteIE wont load at all and chrome lightbox works but just blank squares in flow?
Someone dig me out...
paytonvision@hotmail.com
ReplyDeleteemail me if you can help me with getting this working
thanks
Steven,
ReplyDeleteIE7/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!
ReplyDeleteIE7, problem where imageflow would hang at loading images screen. changed imageflow.js line 395 from:
ReplyDeleteif (! ready) {
to
if (!ready) {
and it works now. Not sure if anyone else ran into this problem but you never know :)
Hi!
ReplyDeleteThank 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.
ReplyDeletehttp://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.