Full Page Image Gallery with jQuery

In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center […]
fullpageimagegallery

From our sponsor: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.

In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

We will use some CSS3 Webkit properties to enhance the look and jQuery for the functionality.
That’s why the demo is best viewed in Webkit browsers like Google Chrome or Apple Safari.

We will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth script!

Again, we will be showing some amazing photography by Mark Sebastian. Please visit his Flickr page or his homepage for more information on his work. The images that we will be using are from “The IT Factor” photo set on Flickr.

So, let’s begin!

The Markup

The HTML consists of a main wrapper div for the gallery. Inside of that wrapper we will have the full screen image, an overlay for a nice halftone pattern effect, a loading div, the navigation items and the thumbnails bar:

<div id="fp_gallery" class="fp_gallery">
	<img src="images/1.jpg" alt="" id="preview" class="fp_preview" style="display:none;"/>
	<div class="fp_overlay"></div>
	<div id="fp_loading" class="fp_loading"></div>
	<div id="fp_next" class="fp_next"></div>
	<div id="fp_prev" class="fp_prev"></div>
	<div id="outer_container">
		<div id="thumbScroller">
			<div class="container">
				<div class="content">
					<div><a href="#"><img src="images/thumbs/1.jpg" alt="images/1.jpg" class="thumb" /></a></div>
				</div>
				<div class="content">
					<div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
				</div>
				...
			</div>
		</div>
	</div>
	<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
</div>

We will also add a “View Thumbnails” div that will appear when the thumbnails are hidden.
We are using (abusing) the alt attribute of the image to keep the path to the full image.
Let’s take a look at the style.

The CSS

First, we will reset the style and define some main properties for the body:

*{
	margin:0;
	padding:0;
}
body {
	background:#212121;
	overflow:hidden;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#fff;
	font-size:10px;
}

In the following, we will define the style for the scrollable thumbs container. Most of the style is adapted from Malihu’s thumbnail scroller. We just edited some padding and margins and added a webkit reflection to the whole container:

#outer_container{
	position:fixed;
	bottom:-160px;
	margin:0px 0px 30px 0px;
	height:130px;
	padding:0;
	-webkit-box-reflect:
		below 5px -webkit-gradient(
			linear,
			left top,
			left bottom,
			from(transparent),
			color-stop(0.6, transparent),
			to(rgb(18, 18, 18))
		);
}

The bottom value of the container is negative in order to hide the thumbnails bar. When we load the page, we show the bar.

The following classes define the style of the inner elements of the thumbnail container:

#thumbScroller{
	position:relative;
	overflow:hidden;
}
#thumbScroller .container{
	position:relative;
	left:0;
}
#thumbScroller .content{
	float:left;
}
#thumbScroller .content div{
	margin:2px;
	height:100%;
}

The thumbnail images are going to have a thick white border and we will restrict their height to 120px:

#thumbScroller img,
img.clone{
	border:5px solid #fff;
	height:120px;
}
#thumbScroller a{
	padding:2px;
	outline:none;
}

The halftone pattern is shown by the overlay element which will be stretched over all the screen and move when we scroll since it is fixed:

.fp_overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	background:transparent url(../images/icons/pattern2.png) repeat-x bottom left;
}

The loading div will appear whenever we click on an image and wait for the full image to load. It will be centered on the screen with the help of the “50% trick”:

.fp_loading{
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	margin:-35px 0px 0px -35px;
	background:#000 url(../images/icons/loader.gif) no-repeat center center;
	width:70px;
	height:70px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	z-index:999;
	opacity:0.7;
}

The navigation elements will be styled as follows:

.fp_next,
.fp_prev{
	width:50px;
	height:50px;
	position:fixed;
	top:50%;
	margin-top:-15px;
	cursor:pointer;
	opacity:0.5;
}
.fp_next:hover,
.fp_prev:hover{
	opacity:0.9;
}
.fp_next{
	background:#000 url(../images/icons/next.png) no-repeat center center;
	right:-50px;
}
.fp_prev{
	background:#000 url(../images/icons/prev.png) no-repeat center center;
	left:-50px;
}

While the navigation items will be positioned to the left and right and centered vertically, we will position the toggle item at the bottom of the page, centered horizontally:

.fp_thumbtoggle{
	height:50px;
	background:#000;
	width:200px;
	text-align:center;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #000;
	position:fixed;
	left:50%;
	margin-left:-100px;
	bottom:-50px;
	line-height:50px;
	cursor:pointer;
	opacity:0.8;
}
.fp_thumbtoggle:hover{
	opacity:1.0;
}

Hovering a div will not work in every browser and can also be done with jQuery.

And finally, the style for the full image. Here we set the width to be always 100%, filling out the complete screen. This might make the image look pixelated on large screens but we have our halftone pattern to reduce the effect 🙂

img.fp_preview{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
}

Now, let’s do some magic!

The JavaScript

In the head of our HTML document we will add the jQuery thumbnail scroller by Malihu. We will be using the full size, horizontal scroller with easing. That’s why we also need to include the easing script after the inclusion of the jQuery script.

In our jQuery function we will first define some variables:

//current thumb's index being viewed
var current			= -1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader		= $('#fp_loading');
var $btn_next		= $('#fp_next');
var $btn_prev		= $('#fp_prev');
var $thumbScroller	= $('#thumbScroller');

Then we will call the function showThumbs which will make the thumbnail container appear from the bottom of the page:

showThumbs(2000);

Next, we will make the whole page scrollable vertically on mouse move. When a full sized image is loaded, we want this functionality to be available:

makeScrollable();

When we click on a thumbnail, a lot of things are going to happen. First, we will create a clone of the current thumbnail which will then move to the center of the page. Then we will load the full sized image and when it finished loading, we want the clone thumbnail to expand and fade out. We will also hide the thumbnails and show the “View thumbnails” button:

$thumbScroller.find('.content').bind('click',function(e){
	var $content= $(this);
	var $elem 	= $content.find('img');
	//keep track of the current clicked thumb
	//it will be used for the navigation arrows
	current 	= $content.index()+1;
	//get the positions of the clicked thumb
	var pos_left 	= $elem.offset().left;
	var pos_top 	= $elem.offset().top;
	//clone the thumb and place
	//the clone on the top of it
	var $clone 	= $elem.clone()
	.addClass('clone')
	.css({
		'position':'fixed',
		'left': pos_left + 'px',
		'top': pos_top + 'px'
	}).insertAfter($('BODY'));

	var windowW = $(window).width();
	var windowH = $(window).height();

	//animate the clone to the center of the page
	$clone.stop()
	.animate({
		'left': windowW/2 + 'px',
		'top': windowH/2 + 'px',
		'margin-left' :-$clone.width()/2 -5 + 'px',
		'margin-top': -$clone.height()/2 -5 + 'px'
	},500,
	function(){
		var $theClone 	= $(this);
		var ratio		= $clone.width()/120;
		var final_w		= 400*ratio;

		$loader.show();

		//expand the clone when large image is loaded
		$('<img class="fp_preview"/>').load(function(){
			var $newimg 		= $(this);
			var $currImage 	= $('#fp_gallery').children('img:first');
			$newimg.insertBefore($currImage);
			$loader.hide();
			//expand clone
			$theClone.animate({
				'opacity'		: 0,
				'top'			: windowH/2 + 'px',
				'left'			: windowW/2 + 'px',
				'margin-top'	: '-200px',
				'margin-left'	: -final_w/2 + 'px',
				'width'			: final_w + 'px',
				'height'		: '400px'
			},1000,function(){$(this).remove();});
			//now we have two large images on the page
			//fadeOut the old one so that the new one gets shown
			$currImage.fadeOut(2000,function(){
				$(this).remove();
			});
			//show the navigation arrows
			showNav();
		}).attr('src',$elem.attr('alt'));
	});
	//hide the thumbs container
	hideThumbs();
	e.preventDefault();
});

When we click on the “View thumbnails” button, we will show the thumbnails container and hide the button and the navigation elements:

$btn_thumbs.bind('click',function(){
	showThumbs(500);
	hideNav();
});

function hideThumbs(){
	$('#outer_container').stop().animate({'bottom':'-160px'},500);
	showThumbsBtn();
}

function showThumbs(speed){
	$('#outer_container').stop().animate({'bottom':'0px'},speed);
	hideThumbsBtn();
}

function hideThumbsBtn(){
	$btn_thumbs.stop().animate({'bottom':'-50px'},500);
}

function showThumbsBtn(){
	$btn_thumbs.stop().animate({'bottom':'0px'},500);
}

function hideNav(){
	$btn_next.stop().animate({'right':'-50px'},500);
	$btn_prev.stop().animate({'left':'-50px'},500);
}

function showNav(){
	$btn_next.stop().animate({'right':'0px'},500);
	$btn_prev.stop().animate({'left':'0px'},500);
}

The events for navigating through the set of images once one is loaded:

$btn_next.bind('click',showNext);
$btn_prev.bind('click',showPrev);

The next two functions will load the previous or next image and place it before the current one which will fade out:

function showNext(){
	++current;
	var $e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	if($e_next.length == 0){
		current = 1;
		$e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	}
	$loader.show();
	$('<img class="fp_preview"/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');
		$newimg.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){$(this).remove();});
	}).attr('src',$e_next.find('img').attr('alt'));
}

function showPrev(){
	--current;
	var $e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	if($e_next.length == 0){
		current = $thumbScroller.find('.content').length;
		$e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	}
	$loader.show();
	$('<img class="fp_preview"/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');
		$newimg.insertBefore($currImage);
		$loader.hide();
		$currImage.fadeOut(2000,function(){$(this).remove();});
	}).attr('src',$e_next.find('img').attr('alt'));
}

And finally, the makeScrollable function which will make the page scroll when the user moves the mouse up or down:

function makeScrollable(){
	$(document).bind('mousemove',function(e){
		var top = (e.pageY - $(document).scrollTop()/2) ;
		$(document).scrollTop(top);
	});
}

And that’s it!
Don’t forget to view the demo in a Webkit browser – especially in Safari you will have a divine smoothness.

We hope you liked the tutorial and the result!

Message from TestkingDownload the testking E20-001 tutorials and testking 646-563 videos with step by step testking 70-685 study guides to learn how to create inspiring web images.

Tagged with:

Mary Lou

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.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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 learning CSS now.

Feedback 102

Comments are closed.
  1. Absolutely fantastic! If I get a job because of your work’s design; I’ll be 100% sure to refer you!

  2. How do I make the first image load automatically onLoad? I’m dumb when it comes to Javascript.

  3. Is there a way to stop the makescrollable() function? I mean:
    i want the page scroll only when the full image is loaded
    and not before. Is possible?

  4. If I have many images, the speed of jquery .animate() is too fast.
    I try with easing linear method, but speed right to left and left to right is different… Anyone can help me?

  5. It tooks me a week to find your tutorials and :

    This one is almost what I need!!!! How can I customize it to work within Drupal? Also, It miss the rollover on the scrollable thumbnail bar (in place of cliking a button) and the pictures opening full window height under the full backstage…and a sliding bar to choose which librarie to explore…and…mmm…forget it ! it’s not Christmas…whatever, any help to use it in Drupal? Pleeeeaaaaasssse!!!!!
    By the way …your work is amazing!

  6. This is insanely freaking awesome! The best Jquery plugin ever! Too bad it doesn’t work in IE6, but who cares! 🙂

  7. Hi, Its just awesome!! Loved it totally. Is there a way to increase the transparency of the overlay pattern or make the pattern look small? Somehow it looks too obvious on certain landscape pictures of mine.

  8. Mary Lou
    This gallery is awesome!
    But, This page doesn’t work link on mobile(I tested on Android). “back to the Codrops tutorial”,”Photos by Mark Sebastian” Links don’t move these webpages on Mobile Phone. Check this please.

  9. Is it possible to load the first image automatically? I would really like to implement it but i don’t have that much experience in JS =S

  10. I was searching for JavaScript for one of my client from last two days but couldn’t get code i wanted….but hey look here i got it and a…m soo happy..
    thank you Tympanus 🙂 God bless

  11. Hi guys,

    That’s really a very good example. As I am new to this party, I need your help. I am trying to simply change the example to drag and drop the thumbnail (instead of clicking on it). Does any one have an idea how to do so? It sounds simple, but unfortunately I couldn’t manage to do it.

    Thanks,

    Andy

  12. hi great plugin, is there a way to make the large image smaller instead of 100%, tried 50% but it ranges left

  13. Love this jquery. Here’s how we used it.

    http://www.fastforwardphotos.com/

    You can display an image automatically when the page loads by giving the div a background image.

    See here:

    You can change this from page to page so it seems like the first photo is loading.

    The only problem is that this image won’t scroll like the ones that display on click but at least you can display an image automatically. It will also sit in the background behind the other photos but should not visibly if the other photos are full screen.

  14. Really liked how you can enlarge the image and by the move of the mouse it scrolls, is it possible to add zoom`ing into the process with the roller?

    Great photo viewer, awesome!

  15. If I want to place this within a sized div and have it conform or mask off by that div how would I do that? I tried overflow:hiddin; on a sized div but no luck.

    Really not good with JS. Anyone have an idea?