<div class="fancybox-wrapper">
<a class="fancybox-pic" rel="group" href="http://lorempixel.com/output/food-q-c-640-480-1.jpg">
	<img src="http://lorempixel.com/output/food-q-c-400-300-1.jpg" alt="">
</a>
<a class="fancybox-pic" rel="group" href="http://lorempixel.com/output/food-q-c-640-480-2.jpg">
	<img src="http://lorempixel.com/output/food-q-c-400-300-2.jpg" alt="">
</a>
<a class="fancybox-pic" rel="group" href="http://lorempixel.com/output/food-q-c-640-480-3.jpg">
	<img src="http://lorempixel.com/output/food-q-c-400-300-3.jpg" alt="">
</a>
</div>
.fancybox-wrapper a img{ display:inline-block; vertical-align:top; width:33%;}
$(document).ready(function() {
		$( ".fancybox-pic" ).fancybox();
	});

External CSS

  1. https://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css
  2. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.min.css
  3. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.min.css
  4. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css
  5. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css
  6. https://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js
  3. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.min.js
  4. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.min.js
  5. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.min.js
  6. https://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.js
  7. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js
  8. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js
  9. https://cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js
  10. https://cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js