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 […]

From our sponsor: Reach inboxes when it matters most with Mailchimp's data-backed email automations. Sign up for Mailchimp now.

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:

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

Feedback 102

Comments are closed.
  1. Hi Mary Lou, I love the “view thumbs” option and I’d like to add an “exit fullscreen image” option as well. Can you help? Javascript is like klingon to me, so needless to say, it’d be really appreciated.

  2. Gorgeous! Simply amazing!

    Any chance to make a WordPress plugin out of this?

  3. Hey Mary, simply amazing! it’s possible make one photo open automatically when the gallery shows up? Instead you have to clink on an image fot it ipen?

  4. What can I say about this?! Whis is really awesome! I got a little question: How do you compress this image? Because it’s big but it keeps the quality with a low size. Im amazed about it. Keep like this, or just “keep getting better” Thanx

  5. Hi guys, how to desactive the vertical pan ? (scroll) i want to use it juste for full page galery without the pan.

    thanks 😉

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

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

  8. 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?

  9. 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?

  10. 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!

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

  12. 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.

  13. 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.

  14. 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

  15. 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

  16. 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

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

  18. 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.

  19. 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!

  20. 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?

  21. Really loved your script! Im going to install it on one of my clients websites. i would make one extra enlarge, so the first enlarge will be to “fit to screen” size.

  22. Thanks alot, this is pure gold.

    One question however. How do you make the loaded image disappear once you click on ShowThumbsBtn ?

    I’m making a variant where I don’t actually show them fullscreen but in 1024×768 (we still see the original background behind)

  23. Still one question…

    Can someone PLEASE tell me how to properly scroll the thumbs if we’re not using them with the screen’s 100% width? I’m using a set width in a div with overflow:hidden. I cannot figure out how to fix this. It seems the mouse goes WAY too far right and i can never see the first thumb.

    thanks.

  24. found it again.. getting good at this. think i know it by heart now! if anyone has the same questions, just ask me !

  25. Is they any way to make a scroll safe area so for example if i added a navigation bar to the website when hovering can the background moving with the mouse ? any help would be great

  26. Is there any way to make an image load automatically instead of having a blank screen? Then from there the thumbs can be clicked etc

  27. SO CLOSE!

    A “Fit to screen” option where the photo fits X or Y to screen and ignores the overflow would have made this perfect for my usage. I find the scrolling annoying.

  28. First and foremost, great tutorials!! I’m a new fan. My question is this. I’ve tried to combine both the full-page-image-gallery and the thumbnails-navigation menu style, as seen here: http://natalieandalanna.com/new-page/new-site-look/, but cannot get the menu to function on the same page. Also, how do I size the image so that it is not so big in the F.P.I.G? I’ve tried several image sizes, but end up with the same result. Lastly, when I click View Thumbnails, I want the menu to display again?
    Click on Collections, then Pre-Fall and Fall-Winter for examples. Any suggestions?
    I am a total noob developer and have learned mainly by trial and erroe, but I refuse to give up. I had it working once, but made a mistake and have been trying hard to retrace my steps. Thank you greatly! -R

  29. But the picture is only applicable to portrait, how it can be compatible with landscape and portrait display, thank you! Expecting a reply.

  30. HI there, I love this scroller / gallery!

    There is an issue with it on ipad’s where it wont scroll at all 🙁

    I was wondering if you had a fix for this? Or could help. please.

  31. Nice tutorials, I’m also interested in using videos over images to make it more interactive. Is it possible? Could you do a followup post if so? Thanks

  32. Hi, thanks for an awesome tutorial. i would like to know that is there a way to make it into multiples rows instead of one?

  33. Your page and tutorials are just plain awesome! In fact my web page is almost all from your cool stuff!
    http://www.powerpig.net

    I have just one problem. When I reach/upload 34 image, thumbnails on the web does not show! any ideas?

    TNX A LOT!