jQuery Large Thumb Photo Gallery

What I decided to do was load the large images into the page with AJAX so that the initial load time was faster, and the gallery could handle more images on slower connections.

 

The HTML

Below is the new HTML markup for the thumb gallery. As before it is just a few unordered lists. The only differences are that #large_images which used to be a list is now a DIV, the urls for the large images have been added to the href attribute of the thumb link, and a new DIV called .loading has been added to contain our loading GIF.

Jquery Photogallery

jquery photogallery

Click Image To close

    • thumb1

      This texture came from an advertising board on the streets of New York.

    • thumb2

      This texture is from a wall I took a photo of.

    • thumb3

      This is some old wood with some interesting paint on it.

    • thumb4

      This is another old advertising board that had been picked apart

    • thumb5

      I don't remember if I downloaded this one or shot it, but it is a garage door.

    • thumb1

      This is on an iron rail outside a brownstone that has been rusted.

    • thumb1

      Another concrete texture. Interesting colors.

    • thumb2

      Texture of rusted metal that I got off stockxchange.

    • thumb3

      Some weird "broccoli" according to my roomate, although I think it is suspect.

    • thumb4

      Some wood with graffiti on it and some kind of paper.

    • thumb5

      Another rusty door for your pleasure

    • thumb1

      This is the sidewalk on the north side of houston and mott I believe in NYC.

We will use the href attribute to make the connection between the thumb and the large image with this new system, instead of using the rel attribute and the id of the large image.

The CSS

The CSS is also almost identical, except we have added attributes to the .loading class. As before I would copy my CSS and modify the styles to fit your design as some DIVS need to be absolutely and relatively positioned.

@charset "utf-8";
/* CSS Document */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}

p{color:#FFF; font-family:'Georgia', Times New Roman, Times, serif; font-style:italic; font-size:0.8em; line-height:1.5em;}
img{border:0;}
#title{width:283px; float:left; display:inline; margin:10px 0 10px 63px;}

#wrapper{width:1000px; margin:auto}
#content{width:1000px; float:left; display:inline;}
#arrow_wrap{width:1000px; float:left; display:inline;}
#photo_wrap{width:855px; height:478px; position:relative; float:left; display:inline; border:#464646 3px dashed; margin:5px; overflow:hidden;}
#thumbs{position:absolute; z-index:10; left:0; list-style-type:none;  display:inline;}
#thumbs li{ float:left; display:inline;}
#close_msg{background:#000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px; width:300px; text-align:center; position:absolute; z-index:14; top:45%; left:31%;}

#large_images{position:absolute; z-index:13;}
#large_images img{border:#464646 5px solid; width:845px; height:468px;}
#next{width:60px; float:left; display:inline;margin:5px 0;}
#prev{width:60px; float:left; display:inline;margin:5px 0;}
#prev a, #next a {display:none;}

.group{position:relative; float:left; display:inline; width:855px;}
.group li{margin:7px;}
.thumb_img{border:#ccc 1px solid;}
.group li, .thumb_img{float:left; display:inline; width:268px; float:left; position:relative;}
.group .hide{position:absolute; background:#000; padding:10px; bottom:0; left:0; width:248px; float:left;  z-index:11; margin:1px; }
.hide{display:none;}
.loading{display:none; position:absolute; top:40%; left:48%; z-index:15;}
.loading img{border:0 !important;}

The Main Difference, the Jquery

Instead of just hiding and showing images, we will now inject the image into a DIV in the DOM via AJAX. All the changes to this script for the most part are in the click function. Although we did remove 2 loops from the beginning of the script that are not needed anymore.

$(document).ready (function(){
//loops to add classes and identifiers
$('.thumb_desc').each(function(index, element){$(element).attr("class", 'hide');});
$(".group li a").each(function(index, element){$(element).attr("rel", 'image'+index);});

//variables
var mainImg = "";
var showImg = "";
var contWidth = $('#photo_wrap').width();
var groups = $('.group').size();
var totalWidth = groups*contWidth;
var sectCount = 0;

//slider if needed
$('#thumbs').css('width',totalWidth);

//if there are more than 6 items scroll
if(groups>1){
$('#next a').css('display','inline');
}

$('#prev a').click(function(){
if(sectCount >0){
$('#thumbs').animate({left: '+='+contWidth+'px'},{duration: 'slow', easing: 'swing'})
sectCount=sectCount-1;
//if there is no more sections to show hide arrow
if(sectCount==groups){
$('#next a').css('display','none');
}else{
$('#next a').css('display','inline');
}
if (sectCount ==0) {
$('#prev a').css('display','none');
}else{
$('#prev a').css('display','inline');
}
}

})
$('#next a').click (function(){
if(sectCount $('#thumbs').animate({left: '-='+contWidth+'px'},{duration: 'slow', easing: 'swing'})
sectCount = sectCount+1;
//if there is no more sections to show hide arrow
if(sectCount==groups-1){
$('#next a').css('display','none');
}else{
$('#next a').css('display','inline');
}
if (sectCount ==0) {
$('#prev a').css('display','none');
}else{
$('#prev a').css('display','inline');
}
}

});

// hover function SHOW ME DESCRIPTIONS MAN!
$('.group li').hover (function(){

$(this).children('.hide').slideToggle('fast');
});

The first two loops which added the rel attribute and the id that matched it to 2 of our lists are gone, because we don’t need to make that connection anymore. Now the href attribute and a little AJAX will do the trick. Below is the new click function in all its glory, along with the new close function which had to be slightly tweaked to work with this new script.

$('.thumb_img a').click (function(){
showImg = $(this).attr("href");
$('.loading').fadeIn('slow', loadImage());
return false;
function loadImage(){
var img = new Image;
$(img).load(function () {
$('.loading').fadeOut('slow', function(){
$('#close_msg').fadeTo('slow', 0.5).delay(500).fadeOut('slow');
});
$('#large_images').append(this,showImgs());
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', showImg).addClass('current');

}
function showImgs(){
$('#large_images').fadeIn('slow');
$('#prev a').fadeOut('slow');
$('#next a').fadeOut('slow');
}

});

//close image function
$('#large_images').click (function(){
$(this).fadeOut('slow', function(){
$('.current').remove();
});
//see which arrows to display
if(sectCount==groups-1){
$('#next a').css('display','none');
}else{
$('#next a').css('display','inline');
}
if (sectCount ==0) {
$('#prev a').css('display','none');
}else{
$('#prev a').css('display','inline');
}

});

});

Essentially on click we grab the href attribute of the clicked item, and save it to the variable showImg, then we fade in the loading GIF. After that we load the new image using the showImg variable we fade in the new image, fade out the loader and fade in the instructions for closing. Finally we add the class current to the large image so that we can easily target it with the close function.

The new close function fades out the image when clicked and then removes it from the DOM completely so that the DIV is ready for the next picture to be injected.

Download: http://www.htmldrive.net/items/download/653

Leave a comment