How To Create Responsive jQuery Photo Gallery For Your Website

Do you want to create responsive jQuery photo gallery? In this article, we show you how to create 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 at 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

Create Responsive jQuery Photo Gallery Using Fancybox

Fancybox is a popular jQuery plugin for displaying images, videos in responsive lightbox.

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

Leave a Reply

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