Building a paged image gallery with jQuery

Funkiness rating

Devviness rating

One of the funkiest features of jQuery is the enormous amount of plugins developed by the community: as every good developer knows, most problems have already been solved by someone else, so a good community of developers providing solutions to known problems is a key feature of any framework.

Today, we’ll see how to build a cool-looking paged image gallery using two jQuery plugins in combination: Galleria for image displaying and Pagination for (surprise!) pagination.

First of all, let’s build a single-page image gallery, we’ll add paging support later; Galleria is incredibly easy to use, you just have to put the images in an <ul> and then call .galleria() on it:

<script type="text/javascript"></script>
<ul id="gallery">
	<li><img src="foo.jpg" alt="" /></li>
	<li><img src="bar.jpg" alt="" /></li>
</ul>

The result will look somehow like this (given some CSS tweaking):

Notice that the currently active image is displayed full-size and the rest of the images in the <ul> is displayed as a clickable thumbnail.

Of course Galleria provides some options to customize your image gallery rendering, and the most notable are:

The possibility to use your own CSS style for every element of the image gallery
The possibility to attach a callback to the event fired when a thumbnail is clicked and when a thumbnail is hovered
The choice weather to enable or not browser history, allowing the user to use the ‘back’ button in his/her browser

Let’s try adding some fancy animation effects on the thumbnails: for example, we want to have the hovered thumbnail highlighted and the selected image appear fading in, as in the demo:

function imageCallback(image, caption, thumb) {
	image.css('display','none').fadeIn();
	if(image.width() &gt; 500) {
		var ratio = image.width() / 500;
		image.css('width', '500px');
		image.css('height', image.height() / ratio);
	}	
 
	// fetch the thumbnail container
	var _li = thumb.parents('li');
		// fade out inactive thumbnail
	_li.siblings().children('img.selected').fadeTo(500,0.3);
		// fade in active thumbnail
	thumb.fadeTo('fast',1).addClass('selected');
}
 
function thumbCallback(thumb) {
	var _li = thumb.parents('li');
	var _fadeTo = _li.is('.active') ? '1' : '0.3';
	thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
	thumb.hover(
	function() { thumb.fadeTo('fast',1); },
	function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
	)
}
 
$('ul.gallery').galleria({onImage: imageCallback, onThumb: thumbCallback});

And that’s it, fancy graphic effects on both images and thumbnails!

Now, on to pagination: let’s say you have a huge bunch of images in your gallery and having a single list with all the thumbnails is crappy…having just a dozen thumbnail tops for each page would be better…so how do we paginate our images?

With the pagination plugin

First of all, we need to store all our image paths and names in a javascript array:

    var images = [
        ['images/foo.jpg', 'foo'],
        ['images/bar.jpg', 'bar'],
        ['images/quux.jpg', 'quux']
    ];

The array will be handled by the pagination plugin which will internally deal with appropriate indices.

How do we do it? easy!

We add a div, with id=”Pagination”, that will contain page numbers, and then do

$("#Pagination").pagination(images.length, {callback: pageSelectCallback});

Is everything done, then?

No, but we just miss a small point: the pageSelectCallback.

function pageselectCallback(page_index, jq){
	var items_per_page = 2;
	var max_elem = Math.min((page_index+1) * items_per_page, images.length);
	var newcontent = '';
	for(var i=page_index*items_per_page;i
 
';
	}
	$('#imagelist').html(newcontent);
	$('#mainimage').html('');
	$('ul.gallery').galleria();
	return false;
}

Basically, we are calculating the array indices of the images in the current page, and then injecting the appropriate <li> items in the gallery <ul>, calling galleria() again to refresh the current page gallery.

You can see a very basic demo of this tutorial here…have fun!

This entry was posted on Friday, March 13th, 2009, 12:33 pm and is filed under tutorials. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

#1 by wayne - April 10th, 2009 at 15:41

Hi, thank you very much! I was so glad to have found this amazing script! But unfortunately, i can’t get it to work. My pictures just doesn’t show up.. Please help,this are my codes.

function pageselectCallback(page_index, jq){
var items_per_page = 2;
var max_elem = Math.min((page_index+1) * items_per_page, images.length);
var newcontent = ”;
for(var i=page_index*items_per_page;i<max_elem;i++)
{
newcontent += ”;
}
$(’#imagelist’).html(newcontent);
$(’#mainimage’).html(”);
$(’ul.gallery_demo’).galleria();
return false;
}

$(document).ready(function(){

$(’.nav’).css(’display’,'none’); // hides the nav initially

$(’ul.gallery_demo’).galleria({
history : false, // deactivates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable. Let’s not have that in this example.
insert : ‘#main_image’, // the containing selector for our main image.
// If not found or undefined (like here), galleria will create a container
// before the ul with the class .galleria_container (see CSS)
onImage : function(image,caption,thumb) {
$(’.nav’).css(’display’,'block’);
image.attr(’title’,'Next image >>’);

},

onThumb : function(thumb) {
thumb.css({display:’none’,opacity:_fadeTo}).fadeIn(1500); }
$(”#Pagination”).pagination(images.length, opt);

});
});

/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;background:white;color:#555;font:80%/140% ‘helvetica neue’,sans-serif;width:900px;margin: 0 auto;}
h1,h2{font:bold 80% ‘helvetica neue’,sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
/*.caption{color:#888;position:absolute;top:0px;left:500px;width:200px;}*/
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:200px;float:left;}
.gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
.gallery_demo li.hover{border-color:#bbb;}
.gallery_demo li.active{border-style:solid;border-color:#222;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

.galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;}

.nav{padding-top:15px;clear:both;}

.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
.info p{margin-top:1.6em;}

.nav{position:absolute;top:410px;left:0;}

Quote
#2 by wayne - April 10th, 2009 at 15:42

Quote
#3 by Raibaz - April 10th, 2009 at 15:44

Just looking at the code, your problem seems to be in the pageSelectCallback, as you’re adding nothing to the newContent variable and thus not putting anything in the imagelist after switching pages (which actually occurs also on the first display)

Quote
#4 by wayne - April 10th, 2009 at 15:45

link href=”galleria.css” rel=”stylesheet” type=”text/css” media=”screen”
link href=”pagination/pagination.css” rel=”stylesheet” type=”text/css” media=”screen”
script type=”text/javascript” src=”jquery.min.js”
/script
script type=”text/javascript” src=”jquery.galleria.js” /script
script type=”text/javascript” src=”pagination/jquery.pagination.js”/script

script type=”text/javascript”

function pageselectCallback(page_index, jq){
var items_per_page = 2;
var max_elem = Math.min((page_index+1) * items_per_page, images.length);
var newcontent = ”;
for(var i=page_index*items_per_page;i<max_elem;i++)
{
newcontent += ”;
}
$(’#imagelist’).html(newcontent);
$(’#mainimage’).html(”);
$(’ul.gallery_demo’).galleria();
return false;
}

$(document).ready(function(){

$(’.nav’).css(’display’,'none’); // hides the nav initially

$(’ul.gallery_demo’).galleria({
history : false, // deactivates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable. Let’s not have that in this example.
insert : ‘#main_image’, // the containing selector for our main image.
// If not found or undefined (like here), galleria will create a container
// before the ul with the class .galleria_container (see CSS)
onImage : function(image,caption,thumb) {
$(’.nav’).css(’display’,'block’);
image.attr(’title’,'Next image >>’);

},

onThumb : function(thumb) {
thumb.css({display:’none’,opacity:_fadeTo}).fadeIn(1500); }
$(”#Pagination”).pagination(images.length, opt);

});
});

/script
style media=”screen,projection” type=”text/css”

/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;background:white;color:#555;font:80%/140% ‘helvetica neue’,sans-serif;width:900px;margin: 0 auto;}
h1,h2{font:bold 80% ‘helvetica neue’,sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
/*.caption{color:#888;position:absolute;top:0px;left:500px;width:200px;}*/
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:200px;float:left;}
.gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
.gallery_demo li.hover{border-color:#bbb;}
.gallery_demo li.active{border-style:solid;border-color:#222;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

.galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;}

.nav{padding-top:15px;clear:both;}

.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
.info p{margin-top:1.6em;}

.nav{position:absolute;top:410px;left:0;}

/style

/head
body

div id=”Pagination” class=”pagination”>/div
div id=”imagegallery” class=”demo”
ul id=”imagelist” class=”gallery”/
/div

span id=”mainimage” class=”galleria_container”
/span

/body
/html

Quote
#5 by wayne - April 10th, 2009 at 15:50

Raibaz :
Just looking at the code, your problem seems to be in the pageSelectCallback, as you’re adding nothing to the newContent variable and thus not putting anything in the imagelist after switching pages (which actually occurs also on the first display)

Oops sorry, i forgot to add this one on top of the function.

var images = [

['', ''],

];

But it still doesn’t work…

Quote
#6 by wayne - April 10th, 2009 at 15:52

var images = [
?
require_once 'dbcon.php';
require_once 'fetch_img.php';
$pic = get_pictures();
foreach ($pic as $ima) {
?
[' echo $ima['image'] ‘, ‘ echo $ima['name'] ‘],
}

];

Really sorry for the double posts. Some characters had been filtered out

Quote
#7 by Raibaz - April 10th, 2009 at 15:58

I see, so probably the content of your newcontent += ” was filtered out too…then i have no idea

Have you tried looking into the generated html with Firebug if the images appear correctly in your array and the is correctly populated?

Besides, i’m noticing now that your has class=”gallery” and you’re calling .galleria() on “ul.gallery_demo”, which could be the reason why you don’t see the images…

Quote
#8 by Geogrikbq - September 9th, 2009 at 16:14

comment7, valtrex rx, :’-D, hoodia for weight loss, :-0, cialis best price, grooms, valtrex commercial, =-O, low cost levitra, irritated, zovirax online, :-/, phentermine no doctor, 3118, buy nexium, fame, order xanax online without prescription, 9183, cheap cialis canada, darling

Quote
#9 by sona - October 25th, 2009 at 02:20

khanker pola vhal lekhso

Quote
#10 by Dan - November 25th, 2009 at 15:03

How do you get this script to open the first image in the large container by default on page load?

Quote
#11 by usonlha - January 18th, 2010 at 19:01

aszhai evqgybnslake, [url=http://exrylofrclou.com/]exrylofrclou[/url], [link=http://cdartwecullq.com/]cdartwecullq[/link], http://yqgtducetavp.com/

Quote
#12 by kzcaztta - January 28th, 2010 at 18:37

ZSRJjQ voiqgiekbdtx, [url=http://xyhfqomdttfz.com/]xyhfqomdttfz[/url], [link=http://gpuggmqjeuqu.com/]gpuggmqjeuqu[/link], http://aqlnksytqbck.com/

Quote

No trackbacks yet.

Building a paged image gallery with jQuery

Spam Blocked