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

From our sponsor: Elevate all your marketing with Mailchimp Smarts.

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 class="content">
					<div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb" /></a></div>
	<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</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.


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

body {
	font-family:Arial, Helvetica, sans-serif;

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:

	margin:0px 0px 30px 0px;
		below 5px -webkit-gradient(
			left top,
			left bottom,
			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 .container{
#thumbScroller .content{
#thumbScroller .content div{

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

#thumbScroller img,
	border:5px solid #fff;
#thumbScroller a{

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:

	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”:

	margin:-35px 0px 0px -35px;
	background:#000 url(../images/icons/loader.gif) no-repeat center center;

The navigation elements will be styled as follows:

	background:#000 url(../images/icons/next.png) no-repeat center center;
	background:#000 url(../images/icons/prev.png) no-repeat center center;

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:

	text-shadow:1px 1px 1px #000;

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 🙂


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:


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:


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:

	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()
		'left': pos_left + 'px',
		'top': pos_top + 'px'

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

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


		//expand the clone when large image is loaded
		$('<img class="fp_preview"/>').load(function(){
			var $newimg 		= $(this);
			var $currImage 	= $('#fp_gallery').children('img:first');
			//expand clone
				'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'
			//now we have two large images on the page
			//fadeOut the old one so that the new one gets shown
			//show the navigation arrows
	//hide the thumbs container

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


function hideThumbs(){

function showThumbs(speed){

function hideThumbsBtn(){

function showThumbsBtn(){

function hideNav(){

function showNav(){

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


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

function showNext(){
	var $e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	if($e_next.length == 0){
		current = 1;
		$e_next	= $thumbScroller.find('.content:nth-child('+current+')');
	$('<img class="fp_preview"/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');

function showPrev(){
	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+')');
	$('<img class="fp_preview"/>').load(function(){
		var $newimg 		= $(this);
		var $currImage 		= $('#fp_gallery').children('img:first');

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

function makeScrollable(){
		var top = (e.pageY - $(document).scrollTop()/2) ;

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.


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

  2. 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)

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


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

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

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

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

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

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

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

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

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

  13. Your page and tutorials are just plain awesome! In fact my web page is almost all from your cool stuff!

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

    TNX A LOT!