jQuery image gallery
During a recent project I decided to implement an image gallery using jQuery for visual effects. I needed a series of thumbnails that would be clickable to update a full size image using nice fade transitions.
Some Googling unearthed Galleria which looked promising, though upon testing and deploying to a remote site I found it to be a little slow and there were some incompatibility issues with Safari.
Simplified jQuery Gallery
I decided to create an simplified version to cut out the overheads and hopefully speed things up. This relies on a simple HTML <ul> list with embedded thumbnails with title tags to be used for captions - and for the full image a <div> container.
<ul class="gallery">
<li class="active"><a href="fullimage1.jpg" onclick="return(false);"><img src="thumbimage1.jpg" title="Image 1 caption" /></a></li>
<li><a href="fullimage2.jpg" onclick="return(false);"><img src="thumbimage2.jpg" title="Image 1 caption" /></a></li>
<li><a href="fullimage3.jpg" onclick="return(false);"><img src="thumbimage3.jpg" title="Image 1 caption" /></a></li>
</ul>
<div id="main_image" class="loading">
<img src="fullimage1.jpg" />
<p class="caption">Image 1 caption</p>
</div>
While developing the Javascript code I came across a jQuery (Version 1.2.6 at the time) error with Safari 2 which causes it to crash. I solved this by replacing html() with text() when writing in the caption for the selected image. The Javascript code is as follows:
// JavaScript Document
$(document).ready(function() {
// fade in default image
$(’#main_image img’).css(’display’,'none’).fadeIn(’normal’);
// fade out inactive thumbnails
$(’ul.gallery li.active’).siblings().css({display:’none’,opacity:’0.4′}).fadeIn(500);
// thumbnails hover effects
$(’ul.gallery li’).hover(function() {
$(this).not(’.active’).fadeTo(’fast’,1);
$(this).not(’.active’).css(’position’, ‘relative’).css(’left’, 0).css(’top’, 0); // Fixes Safari 2 rendering issue
}, function() {
$(this).not(’.active’).fadeTo(’fast’,0.4);
}
);
// thumbnails click function
$(’ul.gallery li’).click(function() {
// set class for clicked thumbnail to active
$(this).addClass(’active’);
// fade out and remove active classes on all other thumbnails
$(this).siblings().removeClass(’active’).fadeTo(’fast’,0.4);
// get image source reference from the thumbnail link and store in a variable
var img = $(this).children(’a').attr(’href’);
// get image caption from the title attribute of the image tag
var caption = $(this).children(’a').children(’img’).attr(’title’);
// fade out and hide the previous image
$(’#main_image img’).fadeOut().hide();
// and the caption
$(’#main_image .caption’).fadeOut().hide();
// set the new image source file and fade in the new image
$(’#main_image img’).attr(’src’,img);
$(’#main_image img’).fadeIn();
// set the caption text
$(’#main_image .caption’).text(caption).fadeIn();
});
});
October 8th, 2008 at 10:49 am
Hi. This is a fantastic script I think. Small and it does the things it should do … not more, not less.
The only improvement I see is, that the “big” images in the list should be loaded before they are shown (or a spinning wheel could be shown until the picture is ready). The problem at the moment is, that if you opened picture 01 and click to open picture 02, picture 01 is faded in and afterwards it switches to picture02 because picture02 is not ready to be shown.
Maybe this is improveable
October 13th, 2008 at 10:39 pm
Yes, quite right. I simplified it here to just give the basic script. I added a preload function on the live version using a
$(window).load()function. Though this should also be improved (as you say) by displaying a spinning wheel for any image not loaded when it’s requested.Always room for improvement!
October 21st, 2008 at 4:03 pm
Thank you for sharing this, I’ve been convinced you can create a gallery in Jquery without adding additional plugins but it’s nice to actually see one.
March 10th, 2009 at 11:44 pm
Hi there,
I am new to website design and wanted to know if I could download your Safari 2 fix for Galleria files from somewhere. I tried following the direction on the post but I couldn’t get it to work. Sorry for sounding so lame - remember I just started.
Thanks!!!
March 10th, 2009 at 11:54 pm
Hi Alex, I posted on the specific error on the next post:
http://pedesign.co.uk/blog/web-browsers/jquery-crashing-safari-2/
July 1st, 2009 at 5:41 am
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
November 30th, 2009 at 2:15 pm
Could you recommend any specific resources, books, or other blogs on this topic?
December 24th, 2009 at 8:27 pm
thankyou thankyou soo much for sharing.. ^_^