Manual photo filmstrips in jQuery
Posted by Michael on 29/04/2009 17:47
Leave a comment
6 comments
One thing I was looking for recently, was a way in jQuery to click a thumbnail image, and for a larger image on the page to be replaced with the larger version the thumbnail (which the thumbnail is a link to). This was for some improvements to our e-commerce framework. After searching without success (although I'm sure I've seen it somewhere before), I realised it would be really easy to create from scratch - so I did, and here it is for you all to enjoy! Its really simple, but does the job.
$(document).ready(function(){
imageSwapper(".thumbnails a");
});
function imageSwapper(link) {
$(link).click(function(){
$('#largeimage').attr('src', this.href);
return false;
});
};
Just put the thumbnails in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!
Hmm, seems to be something simple that I did with traditional JavaScript a while ago on http://www.cohda.com.
Posted by Martin Bean
on 30/04/2009 08:52
Similar in principle, although this method degrades nicely (no JS, the thumbnails/links just take you to the larger images). Quite like the way you used the little dots as links to toggle, similar to iphone app store for viewing screenshots. On a completely irrelevant note, it looks like they (Cohda) are based in the same building as me (although not right now, since its 2.40am...and I seem to be the only one here).
Posted by Michael Peacock
on 01/05/2009 02:40
Nice snippet, any ideas on how I could add a fadeIn() effect to the imageSwapper? Jquery seems to swap the image immediately, and then applying fadeIn to it, result a brief flash of the new loaded image at full opacity.
Posted by
Joris on 05/05/2009 06:32
Nice snippet, any ideas on how I could add a fadeIn() effect to the imageSwapper? Jquery seems to swap the image immediately, and then applying fadeIn to it, result a brief flash of the new loaded image at full opacity.
Posted by
Joris on 05/05/2009 06:33
I think you would need to have a containing div for the large image, fade it out, change the image, and fade it back in. If I get some time, I'll see if I can knock up some code for you.
Posted by Michael Peacock
on 05/05/2009 11:43
$(document).ready(function(){ imageSwapper(".thumbnails a"); }); function imageSwapper(link) { $(link).click(function(){ var loc = this.href; $("#largeimage").fadeTo(500,0,function() { $("#largeimage").attr('src', loc); }).fadeTo(500, 1); return false; }); }; Seems to work in FF3 and IE7. The fade in/out adds a nice tough to it but I'm not sure how this will perform if the connection is slow since there's no way to test if the image is fully loaded.
Posted by
Joris on 05/05/2009 14:28
Comments