Fancybox - Create a gallery using Fancybox (Example of Fancybox)

Fancybox - Create a gallery using Fancybox (Example of Fancybox)

by rajnishw3

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<!--- include jquery https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js to your file --->

<!--- include https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css to your file --->

<!--- include https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js to your file --->



<a class="gallery" data-fancybox="gallery" href="https://goo.gl/pX4Jxk">
	<img src="https://goo.gl/pX4Jxk">
</a>
<a class="gallery" data-fancybox="gallery" href="https://goo.gl/6crnn1">
	<img src="https://goo.gl/6crnn1">
</a>
<a class="gallery" data-fancybox="gallery" href="https://goo.gl/pX4Jxk">
	<img src="https://goo.gl/pX4Jxk">
</a>
<a class="gallery" data-fancybox="gallery" href="https://goo.gl/6crnn1">
	<img src="https://goo.gl/6crnn1">
</a><a class="gallery" data-fancybox="gallery" href="https://goo.gl/pX4Jxk">
	<img src="https://goo.gl/pX4Jxk">
</a>
<a class="gallery" data-fancybox="gallery" href="https://goo.gl/6crnn1">
	<img src="https://goo.gl/6crnn1">
</a><a class="gallery" data-fancybox="gallery" href="https://goo.gl/pX4Jxk">
	<img src="https://goo.gl/pX4Jxk">
</a>
<a class="gallery" data-fancybox="gallery" href="https://goo.gl/6crnn1">
	<img src="https://goo.gl/6crnn1">
</a><a class="gallery" data-fancybox="gallery" href="https://goo.gl/pX4Jxk">
	<img src="https://goo.gl/pX4Jxk">
</a>
<a class="gallery" data-fancybox="gallery" href="https://goo.gl/6crnn1">
	<img src="https://goo.gl/6crnn1">
</a><a class="gallery" data-fancybox="gallery" href="https://goo.gl/pX4Jxk">
	<img src="https://goo.gl/pX4Jxk">
</a>
<a class="gallery" data-fancybox="gallery" href="https://goo.gl/6crnn1">
	<img src="https://goo.gl/6crnn1">
</a><a class="gallery" data-fancybox="gallery" href="https://goo.gl/pX4Jxk">
	<img...

CSS

.gallery{
	display: block;
	width: 100px;
	height: 100px;
	float: left;
	margin: 2px;
}
.gallery img{
	width: 100%;
	height: 100%;
}