Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Want To Create An Image Gallery With A Thumbnail View: Check Out CSS3

DZone's Guide to

Want To Create An Image Gallery With A Thumbnail View: Check Out CSS3

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

 Showcasing images as a thumbnail view not only offers an easily accessible interface, but also adorns the design with uncluttered and well-organized appearance.

Probably, while considering the development of a gallery boasting images in a thumbnail view, the first thing that might come in your mind will be jQuery methods. The Internet demands fast and efficient web pages to efficiently attract potential users and keep them engaged. And since, CSS is a way faster and easier than complicated jQuery, the CSS-based approach makes a better choice. Moreover, the transition and transform, which are the two integral attributes of CSS3 offer wonderful animation effects for a browser based system.

Here in this post, you will learn a proficient, fast and simple CSS-based approach to create an effective image gallery that will represent files in thumbnail view.

Without any further ado, let's begin with the step-by-step CSS implementation for an image gallery.

A.) First Things First: Create a Directory Structure -

For beginning the gallery development, the first thing that you will need to do is create some folders in the below mentioned hierarchy.

Create a new folder and name it as “CSS3ImageGallery”, this will be the Root folder, and will include HTML files and numerous sub-folders. Under this folder, create three sub folders and name them as

scripts” - to store JavaScript libraries,

styles” - to store CSS files that define styles of various HTML tags

images” - make to sub folders under this, and name them as - “sliderimg” for storing slider images and “thumbimg” for storing resized smaller images.

With this, you are done with the directory creation, let's proceed to the next step.

B.) Let's Ponder into the Image Gallery Layout -

Here, we will be creating the gallery layout, for this the very first thing that will be required is the div element defined with a “gallery-container” class. This class further features a h2 heading tag and another dive element as “pagi-container” class. This pagi-container class will be used for representing thumbnail images.

There is a top-padding assigned to the div, which can perfectly represent the vivid photos in the display area available at the center. And, the pagi-container will hold the thumbnail view of the each vivid image as a class element. When a user will click on a thumbnail element the corresponding bigger image will be transitioned to the central area.

While the upper menu features a list of options for different effects and user can choose a desired one. And these effects will be defined under different CSS classes.

C.) Let's Dive Into The Coding Part -

Don't feel jittery after reading this sub-heading, we are not going to implement complex jQuery coding. This one is rather simple method, which will use jQuery scripts only for switching from the CSS class.

Since, here the events will be performed with a click action, the resized thumbnail images are need to be stored under a single frame of reference.

Here are the code snippets for the two files, one is for creating the image gallery, another one is for styling the gallery in an efficient fashion.

  • Code Snippet For the ImageGallery.html file

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

<div class="gallery-container">

<h2>Photo Gallery</h2>

<div class="pagi-container">

<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/sliderimg/sliderimg1.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/sliderimg/sliderimg2.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/sliderimg/sliderimg3.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/sliderimg/sliderimg4.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/sliderimg/sliderimg5.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/sliderimg/sliderimg6.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/sliderimg/sliderimg7.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/sliderimg/sliderimg8.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/sliderimg/sliderimg9.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/sliderimg/sliderimg10.jpg" alt="Image10">

</div>

</div>

<!-- For JavaScript Code Loading. -->

<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');

$('.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);

});

$('.menu ul li:nth-child(1)').trigger('click');

});

</script>

</body>

</html>

  • Code Snippet For the ImageGalleryStyle.html file

*

{

margin:0;

padding:0;

}

/* For 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));

}

.gallery-container

{

width:640px;

border:2px solid rgb(10, 108, 175);

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

}

/* For Thumbnail Images. */

.pagi-container

{

width:640px;

text-align:center;

border: 2px solid rgb(75, 41, 160);

-webkit-border-radius:0px 0px 8px 8px;

-moz-border-radius:0px 0px 8px 8px;

border-radius:0px 0px 8px 8px;

padding-top:350px;

position:relative;

overflow:hidden;

}

.pagi-container input[name='input_thumb']

{

display: none;

}

.pagi-container >label

{

border:1px solid #aaa;

padding:5px;

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;

}

/* For 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);

}

/* For Background */

#background

{

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

height: 26%;

background-color: white;

z-index: -1;

}

/* For Each Pattern Style */

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

}

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

}

By implementing the above mentioned code, you will get an efficiently running image gallery with a slider to choose a desired image and preview its corresponding bigger image.

Now, if you lack the expertise required to play around CSS3, it might as well serve you well to sign up with a web development company  that has the requisite team and expertise to bring any kind of CSS3 alterations into effect.

Irrespective of how you go about it, it's a feature with its rooted in complexity, and one which requires an expert eye. So, tread carefully.  

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}