How to use Fancybox (and why you should!)

If you are a web developer, you came across the requirement by your boss or client:

"Hey man, could you throw me a gallery, and then , when you click the thumbnail, pop the larger image in a new cool window.."

If you will try to  do it yourself, you will have lots of "cross browser" trouble, that will take your good years away from you..

Indroducing, fancybox!

fancybox is a javascript plugin, that will basically popup a (fancy) window, present your content in a cool fashion, and its all in very easy way. (a lil' bit JQuery, and throw some links into your project..)

you need to download this folder first ,

https://github.com/fancyapps/fancyBox/zipball/v2.1.5


and follow this simple example :

javascript: 

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<link href="fancybox/jquery.fancybox.css" rel="stylesheet" />
	<script src="fancybox/jquery.fancybox.pack.js"></script>
	<script>
	$(document).ready(function () {
	fancy();
	});
	function fancy() {
	$('.linkItem').fancybox();
	}
	</script>

view raw gistfile1.js hosted with ❤ by GitHub

HTML: 

	<a class="linkItem" href="myFullSizedImage.jpg">
	<img src="mySmallThumbnail.jpg" alt="thmbnail" />
	</a>

view raw gistfile1.html hosted with ❤ by GitHub