Thumbnails Navigation Gallery with jQuery

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with […]


View demoDownload source

In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.

When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

The beautiful photos are from Mark Sebastian’s photostream on Flickr. You can find all the images used in the demo in the set The “IT” Factor. Please review the Creative Commons license that is included in the demo.

So, let’s get started!

The Markup

Our HTML is mainly going to consist of a wrapper and the menu list. We will have some other elements, like the full image, the loading div and the halftone overlay. First, let’s create the wrapper:

<div id="st_main" class="st_main">

</div>

Inside of our wrapper we will add the following:

<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/>

<div class="st_overlay"></div>

<h1>Mark Sebastian</h1>

<div id="st_loading" class="st_loading">
	<span>Loading...</span>
</div>

The first element is our full preview image. The overlay is going to be a fixed div which will stretch over the whole screen repeating a halftone pattern to create a fancy overlay effect on the image. We also add a title and a loading div.

We then add an unordered list where each li element is going to contain a span for its title and the thumbnails wrapper. The last li element is going to contain some wrapper for text, that’s why we will not give it the class “album”. Later, in the jQuery function we will need to distinguish that.

<ul id="st_nav" class="st_navigation">
	<li class="album">
		<span class="st_link">
			Newest Collection
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_wrapper st_thumbs_wrapper">
			<div class="st_thumbs">
				<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg"/>
				<img src="images/album/thumbs/2.jpg" alt="images/album/2.jpg"/>
				...
			</div>
		</div>
	</li>
	...
	<li>
		<span class="st_link">
			About
			<span class="st_arrow_down"></span>
		</span>
		<div class="st_about st_thumbs_wrapper">
			<div class="st_subcontent">
				<p>
					Some description
				</p>
			</div>
		</div>
	</li>
</ul>

The thumbnail images get the alt value of the path to the full size image. That might not be the proper use of the alt attribute, but it’s just so convenient for our functionality that we will use it this way.

Let’s take a look at the style.

The CSS

First, let’s reset the paddings and margins for all elements and define the general styles:

*{
	margin:0;
	padding:0;
}
body{
	font-family:"Myriad Pro","Trebuchet MS", Helvetica, sans-serif;
	font-size:16px;
	color:#fff;
	background-color:#000;
	overflow:hidden;
}
h1{
	margin:20px;
	font-size:40px;
}

Making the body overflow hidden we avoid any scroll bar appearing, but you can adapt that to your needs. I.e. if it is important that the full sized image is completely viewable by the user, you might want to remove the overflow:hidden property.

Next, we will define the style for the full size image, the overlay and the loading div:

.st_main img.st_preview{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}
.st_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/pattern.png) repeat-x bottom left;
	opacity:0.3;
}
.st_loading{
	position:fixed;
	top:10px;
	right:0px;
	background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
	padding:15px 40px 15px 60px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
	opacity:0.6;
}

By setting the image width to be always 100%, we make sure that it occupies all the horizontal space on the page. For very large screens the image might look pixelated which can, of course, be avoided by using gigantic images. In our demo we use a maximum width of 1600 pixel to make the loading time bearable. The halftone pattern on top of the image helps a little to disguise a pixelated effect.

Please note that whenever opacity is used, the IE filter property needs to be used if you want to achieve semi-transparent effects in IE. The overlay looks like crap if you use the filter property, though. Check out the ZIP file, I added the IE DXImageTransform filter to the respective styles.

The navigation will be positioned absolutely:

ul.st_navigation{
	position:absolute;
	width:100%;
	top:140px;
	left:-300px;
	list-style:none;
}

The initial left value is set to -300 pixel because we want to slide it in only after our full image is loaded. If you use longer titles in the list items, you might need to adapt this value.

Our list elements are going to have the following style:

ul.st_navigation li {
	float:left;
	clear:both;
	margin-bottom:8px;
	position:relative;
	width:100%;
}

The span for the title will be styled as follows:

ul.st_navigation li span.st_link{
	background-color:#000;
	float:left;
	position:relative;
	line-height:50px;
	padding:0px 20px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Next, we define the style for the spans with the up/down arrow for opening and closing the thumbnail container:

ul.st_navigation li span.st_arrow_down,
ul.st_navigation li span.st_arrow_up{
	position:absolute;
	margin-left:15px;
	width:40px;
	height:50px;
	cursor:pointer;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}
ul.st_navigation li span.st_arrow_down{
	background:#000 url(../images/icons/down.png) no-repeat center center;
}
ul.st_navigation li span.st_arrow_up{
	background:#000 url(../images/icons/up.png) no-repeat center center;
}

The wrapper for the thumbnail container will be positioned absolutely and we want to hide any vertical overflow:

.st_wrapper{
	display:none;
	position: absolute;
    width:100%;
    height:126px;
    overflow-y:hidden;
	top:50px;
    left:0px;
}

Although the thumbs are only 120 pixels high, we want to leave some space so that the box shadow of the images inside will not be cut away.
The thumbnails container will simply be styled as follows:

.st_thumbs{
    height:126px;
    margin: 0;
}

The thumbnails will have a neat box shadow and some spacing:

.st_thumbs img{
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	opacity:0.7;
}

The st_about class is the wrapper class for the text container:

.st_about{
	display:none;
	position:absolute;
	top:50px;
    left:0px;
	opacity:0.6;
}

And, finally the text container itself:

.st_subcontent{
	background:#000;
	padding:30px;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
	box-shadow:0px 0px 10px #000;
}

And that’s all the style! Let’s make some magic!

The JavaScript

In our jQuery function we will first define some variables:

//the loading image
var $loader		= $('#st_loading');
//the ul element
var $list		= $('#st_nav');
//the current image being shown
var $currImage 	= $('#st_main').children('img:first');

The first thing that we want to do is to load the current full size image. After it’s loaded, we want the navigation to appear:

$('<img>').load(function(){
	$loader.hide();
	$currImage.fadeIn(3000);
	//slide out the menu
	setTimeout(function(){
		$list.animate({'left':'0px'},500);
	},
	1000);
}).attr('src',$currImage.attr('src'));

The buildThumbs() function calculates the widths of all the thumbnail containers. We need that value for the automatic scrolling function later on:

buildThumbs();

function buildThumbs(){
	$list.children('li.album').each(function(){
		var $elem 			= $(this);
		var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
		var $thumbs 		= $thumbs_wrapper.children(':first');
		//each thumb has 180px and we add 3 of margin
		var finalW 			= $thumbs.find('img').length * 183;
		$thumbs.css('width',finalW + 'px');
		//make this element scrollable
		makeScrollable($thumbs_wrapper,$thumbs);
	});
}

Next, we define the behavior of clicking on the arrows. If it’s down, we will expand the thumbnail container and hide any other. If it’s up, we will make the current container hide again.

$list.find('.st_arrow_down').live('click',function(){
	var $this = $(this);
	hideThumbs();
	$this.addClass('st_arrow_up').removeClass('st_arrow_down');
	var $elem = $this.closest('li');
	$elem.addClass('current').animate({'height':'170px'},200);
	var $thumbs_wrapper = $this.parent().next();
	$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
	var $this = $(this);
	$this.addClass('st_arrow_down').removeClass('st_arrow_up');
	hideThumbs();
});

Before we define the hideThumbs() function, we specify what happens when clicking on a thumb. The full size image will show and while it’s loading we will make the loading div appear. Then we animate the opacity and fade the image in:

$list.find('.st_thumbs img').bind('click',function(){
	var $this = $(this);
	$loader.show();
	$('<img class="st_preview"/>').load(function(){
		var $this = $(this);
		var $currImage = $('#st_main').children('img:first');
		$this.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){
			$(this).remove();
		});
	}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
	$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
	$(this).stop().animate({'opacity':'0.7'});
});

The function to hide the thumbnails looks as follows:

function hideThumbs(){
	$list.find('li.current')
		 .animate({'height':'50px'},400,function(){
			$(this).removeClass('current');
		 })
		 .find('.st_thumbs_wrapper')
		 .hide(200)
		 .andSelf()
		 .find('.st_link span')
		 .addClass('st_arrow_down')
		 .removeClass('st_arrow_up');
}

We animate the height of the li and make the thumbnails container disappear like that. We also need to set the class for the arrow span correctly.

And finally, we will define the makeScrollable() function that automatically scrolls the thumbnails div horizontally on mouse move:

function makeScrollable($outer, $inner){
	var extra 			= 800;
	//Get menu width
	var divWidth = $outer.width();
	//Remove scrollbars
	$outer.css({
		overflow: 'hidden'
	});
	//Find last image in container
	var lastElem = $inner.find('img:last');
	$outer.scrollLeft(0);
	//When user move mouse over menu
	$outer.unbind('mousemove').bind('mousemove',function(e){
		var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
		var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
		$outer.scrollLeft(left);
	});
}

For cufonizing the titles and adding some decent shadow, we will include the following into the head of our html document:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('span,p,h1',{
		textShadow: '0px 0px 1px #ffffff'
	});
</script>

And that’s it! We hope you enjoyed the tutorial and find it useful!

View demoDownload source

Message from TestkingWe offer exceptional 220-702 training program to help you pass sun certification in easy and fast way. Complete your CISSP certification within days using certified resources.
Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 249

Comments are closed.
  1. 1

    Several people advised to put hideThumbs() on line 211 to auto-close the thumbs bar. But when I implement this, you have to click twice on the arrow, because it thinks it is still opened and not closed.

    Any ideas? Please I need your help!

  2. 2

    @Mathew
    How did you solved the height problem? That is, when a photo is vertical its height attribute is set to 100% and when a photo is horizontal its widht attribute is set to 100%?

    I created and tested the code below and it does what I said above. The problem is I don’t know how or where to run or call it on the index.html page.

    function resizeToMax(id) {
    var img = document.getElementById(id);
    myImage = new Image();
    myImage.src = img.src;
    if(myImage.width > myImage.height) { /* landscape */
    img.style.width = “100%”;
    } else { /* portrait */
    img.style.height = “100%”;
    }
    }

  3. 3

    ok I found the solution (so much simpler). Just go to the css file:

    .st_main img.st_preview{
    z-index:-2;
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    }

    and change “width” by “height”. Done. No more cropping of photos. Now the problem is to center the photos. Any suggestions?

  4. 4

    It’s a shame no one cares to answer my questions. I don’t know why I bother posting them and why I bother keeping a link at my website to your page…
    Anyway here’s another question: I checked your demo at IE9 and no problems. I downloaded it and opened it with IE9 locally and all the letters just disappeared. That’s right no heading nor menu’s names.I uploaded it to my website (again, without any changes) to see if the problem had to do with any serverside processing but the problem continued.
    This is all very strange because your demo version works at IE9 and the downloaded version doesn’t. What’s wrong? Anyone experienced the same issue?

  5. 5

    Hi there, your demo and the one on the website definitely doesnt correspond, the downloadable demo’s Menu doesnt work properly in IE – In fact, you only see 10px of the menu, nothing more

  6. 7

    On my build i have tried to add navigational buttons up down to switch the collections and left right ,for the current collection, to swap the image – they would preferably loop so after the last going to the first – is this possible iv tried blending this tutorial with http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/ but no luck yet!

    Is it possible for the background to be 100% high or 100% wide – so that it fills the browser?

    also can the initial image displayed be randomised? i can do it via a horrible method using http://javascriptsource.com/miscellaneous/random-image.html onto of the actual first image :( is there any way to embed this function into the initial part of the script – i have tired but no cigar!

    http://p3.phcd.co.uk/

    is where i am now – as of now – still trying i can’t get the navigation buttons at the bottom to work

    if anyone could help me fix the buttons or make the image fill the frame

    i would be so happy :)

  7. 8

    You are so bad ass! That is the best image gallery I have seen (even vs. the devil Flash).

    I will send you a link up showing my next site using a couple of your tuts.

    Thanks!
    Rob

  8. 9

    @Anton
    I found a way to solve our IE9 problem. Edit your index.html and place the line below as the first line after the tag:

    This way, IE9 will by default load the page using it’s compatibility mode and that worked for me.

    @Matthew
    Meanwhile after hundreds of tries, I concluded that I couldn’t center the image. My workaround was setting a left padding, so that the images aren’t covered by the menus and they look as they are centered.

    [css file below…]

    .st_main img.st_preview{
    z-index:-2;
    position:absolute;
    left:150px; /* this value worked for me */
    height:100%; /* this fixes the vertical photos problem */
    }

    To get full page backgrounds, either with horizontal or vertical photos/backgrounds, you just have to substitute “width” by “height” on the css file.

    You can check my progress so far here: http://www.diogonunes.com/photography


    I’m having a new problem, a weirder one: the menus look good at my laptop and on my desktop they get all overlapped, which is weird because the browser is the same… still trying to find the reason for this.

  9. 13

    http://www.sirlawrencedavis.com/sld_test/index.html

    I attempted to adapt this so that the entire tab can be used to select the tabs and for some reason the thumbnails flash, or blink whenever they are “hidden”. I have changed the function 50 times over and for the life of me I can’t get that to stop happening. I find that it doesn’t do it if I just make the arrow the only selectable part. Any ideas?

  10. 14

    sorry wrong link:
    http://sirlawrencedavis.com/index.html

    I attempted to adapt this so that the entire tab can be used to select the tabs and for some reason the thumbnails flash, or blink whenever they are “hidden”. I have changed the function 50 times over and for the life of me I can’t get that to stop happening. I find that it doesn’t do it if I just make the arrow the only selectable part. Any ideas?

  11. 17

    sorry the blog wont accept the code so inside each img braket you have to write title=”blablabla” then it ill display on mouve over of the img

  12. 18

    Thnks DenisD!
    I’ve tried and yes I can see the title under the mouse, but if I want to have the title to be write like here: http://dl.dropbox.com/u/22933018/SITO/index1.html

    If you watch under “portfolio”, when you move on the pictures you can see the name on it, but it doesn’t move and always appeared on the first photo. I can’t understand why.

    My CSS is:
    .st_thumbs{
    height:166px;
    margin: 0;
    position: absolute;
    }
    .st_thumbs > a{
    display: block;
    }
    .st_thumbs > a > span{
    display: block;
    position: absolute;
    margin-left:auto;
    color:#fff;
    font-size: 28px;
    bottom: -40px;
    left: 18px;
    text-shadow: 5px 1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    }
    .st_thumbs a:hover > span{
    display: block;
    position: absolute;
    border: 0;
    float:left;
    text-align: left;
    left: 20px;
    bottom: 108px;
    }
    .st_thumbs img{
    border: 0;
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    opacity:0.85;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
    }

  13. 19

    ok…watch my test site, i think is kind of what you want…if you look at the source code you’ll see for each pict you have to set a padding-left, rising from the complete left and add 183 or 186px (not sure iv modify mine). Its a bit exhaustive but it work…at this time i work on formule jquery to count the position by itself but for now this is it.
    http://www.ma117.info/thumbtest/index.html

Comments are closed.