This JavaScript code snippet helps you to create an image gallery with thumbnails. Basically, it uses the jQuery gallery plugin to render images thumbnails and gallery interface. It allows users to navigate the images by clicking on the thumbnails. Moreover, it counts the images and displays the image captions over the current image.
You can easily integrate this gallery plugin to show product images, portfolio items, presentations, or slideshow.
How to Create JavaScript Image Gallery with Thumbnails
1. First, create a div element with a class name "gallery" and place your images inside it. You can set the following HTML structure anywhere on your webpage where you want to display an image gallery.
<div class="gallery">
<img src="http://wallpaper-gallery.net/images/random-image/random-image-9.jpg" />
<img src="https://cdn.pixabay.com/photo/2017/03/19/22/12/lighthouse-2157753_960_720.jpg" />
<img src="http://www.myteenagewerewolf.com/home/lauren/public_html/wp-content/uploads/2010/03/random-colors.jpg" />
<img src="https://cdn.pixabay.com/photo/2017/03/22/18/18/forest-2165911_960_720.jpg" />
<img src="http://www.rhaein.com/funnystuff/images/random/random21.jpg" />
<img src="http://wallpaper-gallery.net/images/random-image/random-image-9.jpg" />
<img src="https://cdn.pixabay.com/photo/2017/03/19/22/12/lighthouse-2157753_960_720.jpg" />
<img src="http://www.myteenagewerewolf.com/home/lauren/public_html/wp-content/uploads/2010/03/random-colors.jpg" />
<img src="https://cdn.pixabay.com/photo/2017/03/22/18/18/forest-2165911_960_720.jpg" />
<img src="http://www.rhaein.com/funnystuff/images/random/random21.jpg" />
</div>
2. After that, style the gallery using the following CSS styles. You can set the custom width and height of the gallery wrapper and images in order to customize the gallery. Similarly, you can set the custom background and font size according to your needs.
body {
background: #eee;
}
.gallery {
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
max-width: 90%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
border: 1px solid #777;
overflow: hidden;
}
.gallery .inner {
position: relative;
overflow: hidden;
display: block;
width: auto;
max-width: 800px;
}
.gallery img {
display: none;
}
.main, .cd__main {
display: block !important;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
background: #ccc;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
margin-bottom: 20px;
}
.main:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
.main-selected {
animation: crossfade 0.5s ease;
-webkit-animation: crossfade 0.5s ease;
-moz-animation: crossfade 0.5s ease;
}
@keyframes crossfade {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
@-webkit-keyframes crossfade {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
@-moz-keyframes crossfade {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
.main span {
position: absolute;
display: block;
text-align: center;
font-size: 16px;
font-family: sans-serif;
color: #fff;
bottom: 10px;
left: 0;
right: 0;
}
.thumb-roll {
position: relative;
width: auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.thumb {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
margin-right: 20px;
background: #ccc;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
overflow: hidden;
cursor: pointer;
}
.thumb:last-of-type {
margin-right: 0px;
}
.thumb:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 5px 5px 0px rgba(51, 204, 255, 0), inset -5px -5px 0px rgba(51, 204, 255, 0);
}
.thumb.current:after {
box-shadow: inset 5px 5px 0px rgba(51, 204, 255, 1), inset -5px -5px 0px rgba(51, 204, 255, 1);
background: rgba(255,255,255,0.4);
cursor: default;
}
.thumb:hover:after {
box-shadow: inset 5px 5px 0px rgba(51, 204, 255, 1), inset -5px -5px 0px rgba(51, 204, 255, 1);
}
3. Now, load the jQuery JavaScript library by adding the following CDN link to your project.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
4. Finally, add the following JavaScript gallery function between the <script> and </script> tags just after the jQuery to initialize the gallery.
// Fit inner div to gallery
$('<div />', { 'class': 'inner' }).appendTo('.gallery');
// Create main image block and apply first img to it
var imageSrc1 = $('.gallery').children('img').eq(0).attr('src');
$('<div />', { 'class': 'main' }).appendTo('.gallery .inner').css('background-image', 'url(' + imageSrc1 + ')');
// Create image number label
var noOfImages = $('.gallery').children('img').length;
$('<span />').appendTo('.gallery .inner .main').html('Image 1 of ' + noOfImages);
// Create thumb roll
$('<div />', { 'class': 'thumb-roll' }).appendTo('.gallery .inner');
// Create thumbail block for each image inside thumb-roll
$('.gallery').children('img').each( function() {
var imageSrc = $(this).attr('src');
$('<div />', { 'class': 'thumb' }).appendTo('.gallery .inner .thumb-roll').css('background-image', 'url(' + imageSrc + ')');
});
// Make first thumbnail selected by default
$('.thumb').eq(0).addClass('current');
// Select thumbnail function
$('.thumb').click(function() {
// Make clicked thumbnail selected
$('.thumb').removeClass('current');
$(this).addClass('current');
// Apply chosen image to main
var imageSrc = $(this).css('background-image');
$('.main').css('background-image', imageSrc);
$('.main').addClass('main-selected');
setTimeout(function() {
$('.main').removeClass('main-selected');
}, 500);
// Change text to show current image number
var imageIndex = $(this).index();
$('.gallery .inner .main span').html('Image ' + (imageIndex + 1) + ' of ' + noOfImages);
});
// Arrow key control function
$(document).keyup(function(e) {
// If right arrow
if (e.keyCode === 39) {
// Mark current thumbnail
var currentThumb = $('.thumb.current');
var currentThumbIndex = currentThumb.index();
if ( (currentThumbIndex+1) >= noOfImages) { // if on last image
nextThumbIndex = 0; // ...loop back to first image
} else {
nextThumbIndex = currentThumbIndex+1;
}
var nextThumb = $('.thumb').eq(nextThumbIndex);
currentThumb.removeClass('current');
nextThumb.addClass('current');
// Switch main image
var imageSrc = nextThumb.css('background-image');
$('.main').css('background-image', imageSrc);
$('.main').addClass('main-selected');
setTimeout(function() {
$('.main').removeClass('main-selected');
}, 500);
// Change text to show current image number
$('.gallery .inner .main span').html('Image ' + (nextThumbIndex+1) + ' of ' + noOfImages);
}
// If left arrow
if (e.keyCode === 37) {
// Mark current thumbnail
var currentThumb = $('.thumb.current');
var currentThumbIndex = currentThumb.index();
if ( currentThumbIndex == 0) { // if on first image
prevThumbIndex = noOfImages-1; // ...loop back to last image
} else {
prevThumbIndex = currentThumbIndex-1;
}
var prevThumb = $('.thumb').eq(prevThumbIndex);
currentThumb.removeClass('current');
prevThumb.addClass('current');
// Switch main image
var imageSrc = prevThumb.css('background-image');
$('.main').css('background-image', imageSrc);
$('.main').addClass('main-selected');
setTimeout(function() {
$('.main').removeClass('main-selected');
}, 500);
// Change text to show current image number
$('.gallery .inner .main span').html('Image ' + (prevThumbIndex+1) + ' of ' + noOfImages);
}
});
That’s all! hopefully, you have successfully created a JavaScript image gallery with thumbnails. If you have any questions or suggestions, feel free to comment below.
