HTML CSS Image Gallery with Thumbnail

Filed Under: HTML

We’ve been doing sliders in jQuery in our tutorial “Creating your own jQuery/CSS Thumbnail Image Slider/Image Gallery“, and previous ones. What’s new in this tutorial is that we’ll not be using jQuery methods for sliding effects rather we’ll explore the possibilities of CSS in animation using transition and transform properties introduced newly in CSS3. This will cover following topics in order:

HTML CSS Image Gallery with Thumbnails

  1. Why go for CSS based image gallery? How about flexibility?
  2. Pre-requisites
  3. Implementing Pure CSS based Image Gallery
    1. Creating Directory Structure
    2. Understanding Image Gallery Layout
    3. Image Gallery in Pure CSS3 Implementation ( Codes )
  4. CSS3 Image Gallery Output
  5. What’s next?

Why go for CSS based image gallery? How about flexibility?

The reason for choosing CSS over JavaScript is not because of unawareness of jQuery libraries and other coding related stuffs. When talking about an efficient image gallery for a web page, it’s always good to go for the one which is faster to load and takes lesser time to execute which CSS animation does very well compare to JavaScript.

No doubt that these CSS3 in-built properties like transition and transform are the most efficient animation effects for browser based environment. So why not to use the built-in support of CSS? It also saves the page loading time at the same time removes the necessity of the complex jQuery codes.

In terms of flexibility, what else can one think of over CSS properties which is used inside the animate() method of jQuery for animation purpose. I think it’s better to stick to one technology unless there’s no choice but to use JavaScript.

Pre-requisites

This article assumes readers have basic knowledge about what is a webpage, HTML basic tags, few CSS properties such as transition, opacity, text-align etc. and know-how of JavaScript. You can refer to the “www.w3schools.com” website for these topics.

Those who are familiar with these stuffs can directly start with the Implementing Pure CSS based Image Gallery section.

Implementing Pure CSS based Image Gallery

Now with some basic background of JavaScript methods and HTML, we can proceed with the slider implementation. Just follow the following guidelines

  1. Creating Directory Structure

    Let’s organize different resources among folders in our Root directory.

    • ‘CSS3PhotoGallery’ is our Root folder having HTML files with other sub-folders.
    • ‘scripts’ folder contains the JavaScript libraries such as JQuery.
    • ‘styles’ folder contains CSS files defining styles of different HTML tags.
    • ‘images’ folder contains images in two groups as ‘bigimg’ for storing slider images and ‘thumbimg’ for storing resized smaller images.

    Create CSS3 Image Gallery with Thumbnail view

  2. Understanding Image Gallery Layout

    As seen in the layout below, the main container for the gallery is the div element with class = “gallery-container”, which has a heading tag h2 with a div with class= “pagi-container” for holding the thumbnail images.

    This div has a top-padding assigned which is just enough for displaying the bigger images. Each of the pagi-container elements is a thumbnail view of the bigger image. On click of the thumbnail element the respective big image is transitioned to the central display area. The effect for which is defined in different CSS classes which are assigned based on the user’s choice of effect as per the Upper menu. E.g. transition from LEFT, from RIGHT, from TOP-RIGHT etc.

    The layout of this Image Gallery is shown as below:
    Create CSS Image Gallery with Thumbnail

  3. Image Gallery in Pure CSS3 Implementation ( Codes )

    In this CSS based implementation of gallery, we’re not going to use the jQuery scripts except for CSS class switching purpose. Also the primary purpose of this image gallery does not require usage of jQuery CSS class switching.

    Unlike the jQuery based image sliders, where we can place the Thumbnail images and the slider images anywhere in the html body, the CSS based image gallery requires them to be kept within a single frame of reference. The reason being that we are using the click based image gallery where we’ll be using the HTML element input in combination with label having for attribute associated with input tag.

    Each of the image elements has the format as seen in the code below:

    
    <input type="radio" name="input_thumb" id="id1"/>
    <label for="id1">
        <img src="images/thumbimg/thumbimg1.jpg" alt="Image1"/>
    </label>
        <img src="images/bigimg/bigimg1.jpg" alt="Image2">
    

    The id attribute of the input tag is referenced from the label element. That’s the specialty of for attribute of the label element.

    When user clicks on the thumbnail image which is part of the label element, the respective radio input control is clicked and we bring the associated bigger image to the central display area with transition effect chosen by the user.

    Codes for all these files are as shown below.

    PhotoGallery.html

    
    <!Doctype html>
    <html>
    	<head>
    		<title>CSS Photo Gallery</title>
    		<link rel="stylesheet" href="styles/photoGalleryStyle.css">		
    	</head>
    	<body>
    		<div class="menu">		
    		<ul>
    			<li data-pattern="1">Default</li>
    			<li data-pattern="2">From Left</li>
    			<li data-pattern="3">From Right</li>
    			<li data-pattern="4">From Top</li>
    			<li data-pattern="5">From Bottom</li>
    			<li data-pattern="6">From Top-Right</li>
    			<li data-pattern="7">Zoom In</li>
    		</ul>
    		</div>	
    		
    		<!-- Container for Photo Gallery -->
    		<div class="gallery-container">						
    			<h2>Photo Gallery</h2>								
    			<div class="pagi-container">
    				<!-- Following DIV plays an Important Role for Hiding the Bottom Transition of Images overlapping the Pagination Thumbnail images. -->
    				<div id="background"></div>
    				
    				<input type="radio" name="input_thumb" id="id1"/>
    				<label for="id1">
    					<img src="images/thumbimg/thumbimg1.jpg" alt="Image1"/>					
    				</label>
    				<img src="images/bigimg/bigimg1.jpg" alt="Image2">
    			
    				<input type="radio" name="input_thumb" id="id2" />
    				<label for="id2">
    					<img src="images/thumbimg/thumbimg2.jpg" alt="Image2"/>
    				</label>
    				<img src="images/bigimg/bigimg2.jpg" alt="Image2">
    				
    				<input type="radio" name="input_thumb" id="id3" />
    				<label for="id3">
    					<img src="images/thumbimg/thumbimg3.jpg" alt="Image3"/>
    				</label>
    				<img src="images/bigimg/bigimg3.jpg" alt="Image3">
    			
    				<input type="radio" name="input_thumb" id="id4" />
    				<label for="id4">
    					<img src="images/thumbimg/thumbimg4.jpg" alt="Image4"/>
    				</label>
    				<img src="images/bigimg/bigimg4.jpg" alt="Image4">
    				
    				<input type="radio" name="input_thumb" id="id5" />
    				<label for="id5">
    					<img src="images/thumbimg/thumbimg5.jpg" alt="Image5"/>
    				</label>
    				<img src="images/bigimg/bigimg5.jpg" alt="Image5">
    			
    				<input type="radio" name="input_thumb" id="id6" />
    				<label for="id6">
    					<img src="images/thumbimg/thumbimg6.jpg" alt="Image6"/>
    				</label>
    				<img src="images/bigimg/bigimg6.jpg" alt="Image6">
    				
    				<input type="radio" name="input_thumb" id="id7" />
    				<label for="id7">
    					<img src="images/thumbimg/thumbimg7.jpg" alt="Image7"/>
    				</label>
    				<img src="images/bigimg/bigimg7.jpg" alt="Image7">
    			
    				<input type="radio" name="input_thumb" id="id8" />
    				<label for="id8">
    					<img src="images/thumbimg/thumbimg8.jpg" alt="Image8"/>
    				</label>
    				<img src="images/bigimg/bigimg8.jpg" alt="Image8">
    				
    				<input type="radio" name="input_thumb" id="id9" />
    				<label for="id9">
    					<img src="images/thumbimg/thumbimg9.jpg" alt="Image9"/>
    				</label>
    				<img src="images/bigimg/bigimg9.jpg" alt="Image9">
    			
    				<input type="radio" name="input_thumb" id="id10"/>
    				<label for="id10">
    					<img src="images/thumbimg/thumbimg10.jpg" alt="Image10"/>
    				</label>
    				<img src="images/bigimg/bigimg10.jpg" alt="Image10">
    				
    			</div>					
    		</div>
    		
    		<!-- Loading JavaScript Codes. -->
    		<script src="scripts/jquery-2.1.0.js"></script>		
    		<script>
    			// 
    			
    			jQuery(document).ready(function ($) {
    				
    				$('.pagi-container>img').toggleClass('DefaultBigStyle1');
    				$('.pagi-container label:nth-child(3)>img').trigger('click'); // This is to set initial Photo in the Frame.
    				$('.menu ul li').on('click',function(){
    					$('.menu ul li').removeClass();
    					$(this).addClass('menuSelected');
    					index=$(this).data('pattern');
    					console.log('Pattern : '+index+' is Selected..!!');
    					$('.pagi-container>img').removeClass();
    					$('.pagi-container>img').addClass('DefaultBigStyle'+index); // Applying the CSS classes based on User's choice of transition styles.
    				});
    				$('.menu ul li:nth-child(1)').trigger('click');
    			});
    		</script>
    	</body>
    </html>
    

    photoGalleryStyle.css

    
    *
    {
    	margin:0;
    	padding:0;
    }
    
    /* Styling upper Menu */
    .menu
    {
    	margin:10px auto;
    	width:640px;
    	text-align:center;
    }
    
    .menu ul
    {
    	padding:3px;
    	list-style:none;
    	display:inline-block;
    	border:1px solid #aaa;
    	background: radial-gradient(rgba(255, 255, 255, 0.8) 50%, rgba(180,180,180,0.8));
    }
    
    .menu ul li
    {
    	padding:0px;
    	cursor:pointer;
    	float:left;	
    	margin:0 2px 0 2px;
    	font-family:cursive;
    	color:#723A3A;
    	border:1px solid #aaa;	
    	padding:2px;
    }
    
    .menu ul li:hover
    {
    	background: radial-gradient(rgba(199, 224, 205, 0.8) 50%, rgba(103, 140, 196, 0.8));
    }
    
    .menuSelected
    {
    	background: radial-gradient(rgba(199, 224, 205, 0.8) 50%, rgba(103, 140, 196, 0.8));
    }
    
    
    /* ============================== This is for Overall Styling of the Image Gallery. */
    .gallery-container
    {
    	width:640px;
    	border:2px solid rgb(10, 108, 175);
    	/*border-radius*/
    	-webkit-border-radius:5px 5px 10px 10px;
    	-moz-border-radius:5px 5px 10px 10px;
    	border-radius:5px 5px 10px 10px;
    	margin:10px auto;
    	padding:0px;
    	display:table;
    	position:relative;
    	text-align:center; 
    	box-shadow: 0 0 20px #119;	
    }
    
    .gallery-container h2
    {
    	font-family: arial;
    	color: #fff;
    	background: rgb(8, 9, 55);
    	text-shadow: 0 0 15px #12C024;
    }
    
    /* Styling the Pagination Thumbnail Images. */
    .pagi-container
    {
    	width:640px;
    	text-align:center; 
    	border: 2px solid rgb(75, 41, 160);
    	/*border-radius*/
    	-webkit-border-radius:0px 0px 8px 8px;
    	-moz-border-radius:0px 0px 8px 8px;
    	border-radius:0px 0px 8px 8px;
    	padding-top:350px; /* This creates the space for viewing the Slider Images. */
    	position:relative;
    	overflow:hidden;
    }
    
    .pagi-container input[name='input_thumb'] 
    {
    	display: none;	
    }
    
    .pagi-container >label
    {
    	border:1px solid #aaa;
    	padding:5px; /* This is important to Increase the Click-able Region of the anchor Elements */
    	background: radial-gradient(rgba(255, 255, 255, 0.8) 50%, rgba(180,180,180,0.8));
    	display:inline-flex;	
    	transition: all 0.5s;
    	margin-bottom: 5px;
    	box-shadow: 0 0 30px #404741;
    }
    
    .pagi-container >label:hover
    {
    	background: radial-gradient(rgba(220, 220, 220, 0.3), rgba(180,180,180,0.8) 95%);
    }
    
    .pagi-container label img
    {
    	opacity:0.7;	
    }
    
    .pagi-container label img:hover
    {
    	opacity:1.0;
    }
    
    /* This will add the Click Effect */
    .pagi-container input[name='input_thumb']:checked+label {
    	border:1px solid #111;
    	opacity: 1;
    }
    
    .pagi-container input[name='input_thumb']:checked+label>img
    {
    	opacity:1;
    }
    
    .pagi-container input[name='input_thumb']:checked+label+img {
    	opacity: 1;
    	width:640px;
    	height:345px;
    	position:absolute;
    	left:0px;
    	top:0px;
    	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
    	transition: all 1s ease;	
    	transform: scale(1);	
    }
    
    /* Adding #background region to hide the images coming from bottom direction, as it'll overlap with the Pagination Thumbnail images, while transitioning from Down direction. */
    #background
    {
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 100%;
    	height: 26%;
    	background-color: white;
    	z-index: -1;
    }
    
    /* Different Styling for each Patterns. */
    .DefaultBigStyle1
    {
    	position:absolute;
    	opacity:0;
    	width:640px;
    	height:345px;
    	left:0px;
    	top:0px;	
    	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
    	transition: all 1s ease;
    	transform:scale(1.05);
    }
    
    .DefaultBigStyle2
    {
    	position:absolute;
    	width:640px;
    	height:345px;
    	left:-650px;
    	top:0px;
    	opacity:0;
    }
    
    .DefaultBigStyle3
    {
    	position:absolute;
    	width:640px;
    	height:345px;
    	left:650px;
    	top:0px;
    	opacity:0;	
    }
    
    .DefaultBigStyle4
    {
    	position:absolute;
    	width:640px;
    	height:345px;
    	left:0px;	
    	top:-350px;
    	opacity:0;	
    }
    
    .DefaultBigStyle5
    {
    	position:absolute;
    	width:640px;
    	height:345px;
    	left:0px;	
    	top:350px;
    	opacity:0;	
    	z-index:-2; /* IMPORTANT: To give the images coming from down direction a depth, so that it'll not overlap with the Pagination Thumbnail images. */
    }
    
    .DefaultBigStyle6
    {
    	position:absolute;
    	width:640px;
    	height:345px;
    	left:650px;
    	top:-350px;
    	opacity:0;	
    }
    
    .DefaultBigStyle7
    {
    	position:absolute;
    	width:640px;
    	height:345px;
    	left:0px;
    	top:0px;
    	opacity:0;
    	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
    	transition: all 1s ease;	
    	transform: scale(0.5);	
    }
    

    The source codes have comments wherever it is needed. In case of specific doubt you can ask me directly by commenting below.

CSS3 Image Gallery Output

HTML5 image gallery with thumbnails

NOTE: If you are using Chrome browser and want to debug your scripts, you can Press [F12] key and click on ‘Console’ tab to see how ‘thumbnails’ are clicked on click of a button.

You can see this image-gallery in action by visiting below demo page.

CSS3 Image Gallery with Thumbnail view Demo

What’s next?

Hope you guys enjoyed the series of Sliders in CSS3 and jQuery. Do your tricks and customize these sliders with your needs. Let’s head towards the HTML5 series with hands-on of all new HTML5 controls and features. Happy learning!!

Comments

  1. Hi Pankaj,
    What a nice article you have written, nicely and well explained, the best part was it done without using any jquery slider plugin.
    Thanks a keep sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages