Steps to create a webpage with this viewer:

1. Preparation:
   Create a set of linked images, for example in a list:

   <ul>
   <li><a href="FULLSIZE_IMAGE.PNG"><img src="THUMBNAIL_IMAGE.PNG"></a></li>
   <li><a href="FULLSIZE_IMAGE.PNG"><img src="THUMBNAIL_IMAGE.PNG"></a></li>
   <li><a href="FULLSIZE_IMAGE.PNG"><img src="THUMBNAIL_IMAGE.PNG"></a></li>
   ...
   </ul>
   

   For better performance, use thumbnails in the img src. Next, add attributes class, rel and title for FancyBox to the links:

   <ul>
   <li><a href="FULLSIZE_IMAGE.PNG" class="fancybox" rel="mygallery" title="MY TITLE"><img src="THUMBNAIL_IMAGE.PNG"></a></li>
   <li><a href="FULLSIZE_IMAGE.PNG" class="fancybox" rel="mygallery" title="MY TITLE"><img src="THUMBNAIL_IMAGE.PNG"></a></li>
   <li><a href="FULLSIZE_IMAGE.PNG" class="fancybox" rel="mygallery" title="MY TITLE"><img src="THUMBNAIL_IMAGE.PNG"></a></li>
   ...
   </ul>
   

2. Download the FancyBox zip-file and extract it in the same folder where you want to create the webpage. Rename the folder to 'fancybox'.
3. Add jQuery and FancyBox scripts to the header of your webpage:

   <!-- Below we include a Google Hosted JQuery Library, more info: http://developers.google.com/speed/libraries/ -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
   
   <!-- Add mousewheel plugin (this is optional) -->
   <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
   
   <!-- Add fancyBox -->
   <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
   <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
   
   <!-- Optionally add helpers - button, thumbnail and/or media -->
   <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
   <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
   <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
   
   <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
   <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
   

4. At the end of the page, add the script to start FancyBox:

   <script>
   	$(document).ready(function() {
   		$(".fancybox").fancybox();
   	});
   </script>
   

Detailed instructions, options, examples and tips & tricks can be found on the FancyBox site.

Even more things can be customized by changing the Fancybox CSS, fancybox/source/jquery.fancybox.css. And for instance changing the icons can be done by editing the sprite file fancybox/source/fancybox_sprite.png.