How to Use FancyBox jQuery Plugin?

By Hujatulla Asghari On May 19, 2016 0

FancyBox is an amazing jQuery plugin that will let you open any image in the webpage like lightbox modal. When you click on the image, unlike opening on new tab or refreshing the page, it will open it in the same page with a nice modal dialog box. This tutorial will teach you how to configure and use fancybox jquery plugin.

Configurations

For configuration, all you need is to download this plugin form fancyapps.com. After you download the plugin, unzip the file, now you will see some files and folders inside. The folder we need is source folder. Copy that folder to your project. There are some helper files inside helpers folder that you might want to use, but they are optional. We are not going to use them.

Include Fancybox to Your Project

Inside source folder, you have one CSS file and two files for JavaScript. Simply, both JavaScript files are the same, just the one which has suffix of pack.js is compress version for production. For testing, feel free to use either of them.

Now let’s create a html file with a simple template files.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>How to use Fancybox jquery plugin</title>
	<link rel="stylesheet" href="source/jquery.fancybox.css">
</head>
<body>
	

	<!-- images goes there -->

	<script src="source/jquery.js"></script>
	<script src="source/jquery.fancybox.js"></script>
</body>
</html>

To use fancybox jquery plugin, you need to include jquery as well.

How to Use fancybox jQuery plugin?

Now you have configured the fancybox. It’s time to use fancybox jquery pluign and apply it on you images. Every image need to be in <a> tag, and the href attribute must refer to image image path. And one more thing, it must have a class, you can name it anything you wish.

	<div class="gallery">
		<a href="img/1.jpg" class="teching">
			<img src="img/1.jpg" alt="first">
		</a>
		<a href="img/2.jpg" class="teching">
			<img src="img/2.jpg" alt="first">
		</a>
		<a href="img/3.jpg" class="teching">
			<img src="img/3.jpg" alt="first">
		</a>
		<a href="img/4.jpg" class="teching">
			<img src="img/4.jpg" alt="first">
		</a>
	</div>

Apply a little style at top of the page to align them.

<style>
	.gallery{
		display: flex;
	}
	img{
		width: 100%;
		display: inline-block;
	}
</style>

Finally, at the bottom of the page add one line of jquery to apply the script to the images.

<script>
	$(".teching").fancybox();
</script>

It was that easy to use fancybox jquery plugin. It will apply to all elements that have the class of technig.

Here is live example.

[codepen_embed height=”539″ theme_id=”dark” slug_hash=”VaJjvX” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/VaJjvX/’>VaJjvX</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

It was all about how to use fancybox jquery plugin. If you have any questions or problem, feel free to comment it bellow. 🙂