Do you want to create a responsive jQuery photo gallery? In this article, we show you how to create a jQuery photo gallery using the fancyBox.
Why We Need Photo Gallery
The photo gallery is used to organize your photo collection. By creating an image gallery, your users can view your collection of images in one place. Your photo gallery is your portfolio, you should showcase it. There are various reasons you need to put a gallery on the website. You held a business event or meet-ups and now you want to display all your event images for users.
Create Responsive jQuery Photo Gallery Using Fancybox
Fancybox is a popular jQuery plugin for displaying images, videos in a responsive lightbox.
- How To Embed Responsive YouTube Video In the Website
- How To Create YouTube Video Gallery For Your Website
Let’s see step by step how to use a fancyBox and create your photo gallery.
First, we need some images for our gallery. Each image should have two dimensions – small and large. Small dimension images are used to display collections. The Large image will display in the lightbox when an image gets clicked.
Once you are ready with your images, add the below code in your file where you want to display the photo gallery. Make sure to replace the path of images as per your needs.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<a data-fancybox="gallery" href="images/1_large.jpg">
<img src="images/1.jpg">
</a>
<a data-fancybox="gallery" href="images/2_large.jpg">
<img src="images/2.jpg">
</a>The attribute data-fancybox=”gallery” is used to organize your images from the gallery.
At this stage, we are done with the integration of the photo gallery. Now, let’s add some UI to our gallery. In the below code, I use Bootstrap to add some UX for the gallery.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Lightbox</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h3 class="text-center">My Image Gallery</h3>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a data-fancybox="gallery" href="images/1_large.jpg">
<img class="img-responsive" src="images/1.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a data-fancybox="gallery" href="images/2_large.jpg">
<img class="img-responsive" src="images/2.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a data-fancybox="gallery" href="images/3_large.jpg">
<img class="img-responsive" src="images/3.jpg">
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a data-fancybox="gallery" href="images/4_large.jpg">
<img class="img-responsive" src="images/4.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a data-fancybox="gallery" href="images/5_large.jpg">
<img class="img-responsive" src="images/5.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a data-fancybox="gallery" href="images/2_large.jpg">
<img class="img-responsive" src="images/2.jpg">
</a>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>I hope you understand how to create a responsive jQuery photo gallery. If you have any questions or suggestions, please leave a comment below.
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.