Image gallery? What does it mean? Let me explain. You may have already experienced this when you surf web. Image gallery is just a name given by me to explain. If you have entered to a web site containing wallpapers, you can see the thumbnails of wallpapers on a web page. When the mouse pointer is placed on each image, a zoom icon or magnifying icon will be displayed. When you click on it, the image is popped up and shown in a slide show. Today I will create that kind of application with HTML, CSS and jQuery.
For this you need several files.
- Bootstrap source files
- Lightbox CSS, JS files
- Font Awesome icons
- jQuery file
- Additional custome CSS file
- Images
Download source code to get same size image set : Image Gallery
Here we need only one HTML file to include images. First we have to get the needed files. I will put the links to get the source files. All these files are included in my project folder under sub folders. You can get the easily by cloning the repository.
Bootstrap : https://getbootstrap.com/docs/3.3/
Font Awesome : http://fontawesome.io/
Lightbox : http://lokeshdhakar.com/projects/lightbox2/
jQuery : https://jquery.com/download/
LightBox
This is a jQuery script written by Lokesh Dhakar to display the clicked images on in a slide show. We are simply using it since it is freely available. This is the most important part among these source files. For our task, lightbox.css and lightbox-plus-jquery.js are needed. So get them separately. Download jQuery file and font awesome source files. Additionally, style.css file is the extra CSS file to include styles for magnifying icon and images. Place them in folder structure shown below. As usual I use Bootstrap framework.
Create a file called index.html to code for displaying data.
<!DOCTYPE html>
<html>
<head>
<title>Lightbox</title>
<link rel="stylesheet" href="CSS/bootstrap.css">
<link rel="stylesheet" href="CSS/lightbox.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container" style="margin-top: 30px;">
<h2 class="text-center" style="margin-bottom: 50px;">Image Gallery with Lightbox jQuery and CSS</h2>
<div class="row">
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/1.jpg"><span class="roll"></span><img src="images/1.jpg" alt="tiger" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/2.jpg"><span class="roll"></span><img src="images/2.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/3.jpg"><span class="roll"></span><img src="images/3.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/4.jpg"><span class="roll"></span><img src="images/4.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/5.jpg"><span class="roll"></span><img src="images/5.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/6.jpg"><span class="roll"></span><img src="images/6.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/7.jpg"><span class="roll"></span><img src="images/7.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/8.jpg"><span class="roll"></span><img src="images/8.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/9.jpg"><span class="roll"></span><img src="images/9.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/10.jpg"><span class="roll"></span><img src="images/10.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/11.jpg"><span class="roll"></span><img src="images/11.jpg" alt="" class="img-thumbnail"></a>
</div>
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/12.jpg"><span class="roll"></span><img src="images/12.jpg" alt="" class="img-thumbnail"></a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");
// ON MOUSE OVER
$(".roll").hover(function () {
// SET OPACITY TO 90%
$(this).stop().animate({
opacity: .9
}, "fast");
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
});
</script>
<script src="JS/jquery-3.2.1.min.js"></script>
<script src="JS/lightbox-plus-jquery.js"></script>
<script src="JS/bootstrap.js"></script>
</body>
</html>
Important :
Place the jquery original file before the all other jquery files always. And if you are following a different file structure, you have change linking paths for your files. In lightbox.css file, You have to connect images of next, previous, close and loading buttons. So give the correct path for those images. Otherwise, those controls will not be visible. All the slide show tasks are done by lightbox css and js for us. Actually we have nothing to do. The only thing we have to is linking them!!!
Explanation :
<div class="col-lg-3">
<a data-lightbox="roadtrip" href="images/3.jpg"><span class="roll"></span><img src="images/3.jpg" alt="" class="img-thumbnail"></a>
</div>
This is the part for an image that is coded again and again. I'll simply explain it.
According to Bootstrap framework, page has divided into 4 columns and then images have been mocked into this. For images, there's a special CSS class in Bootstrap called img-thumbnail. It is used to style the image containers. Each and every image has an anchor link to be clicked as as link. Then only we can open slide show by click function in jQuery. Same path for an image must be include in both places img -> src and a->href.
<span class="roll"></span>
Span class is doing a major role to get the hover effect and displaying magnifying icon. At the end of the file, you can see a script. It's the jQuery function that enables magnifying behavior and icon. That function is related with the span class called roll.
In the additional CSS file, I have included the styling for magnifying icon. It has been taken from Font Awesome icon pack.
Finally you will have a simple application like this. Watch the video!
Try to create this one also! There's no hard coding here. I think you will enjoy...
Good Luck guys!
Good Luck guys!
Image Gallery with Magnify Icon using HTML, CSS and jQuery (Lightbox Gallery)
Reviewed by DAL
on
January 15, 2018
Rating:
Reviewed by DAL
on
January 15, 2018
Rating:
No comments: