Fancybox2

by lovromar

HTML

<script src="https://raw.github.com/hongaar/fancyBox/master/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://nabble.nl/demo/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="http://nabble.nl/demo/fancybox/source/helpers/jquery.fancybox-thumbs.css">
<script src="https://raw.github.com/hongaar/fancyBox/master/source/helpers/jquery.fancybox-thumbs.js"></script>
<p>
    <a class="fancybox" href="http://nabble.nl/demo/fancybox/demo/1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="http://nabble.nl/demo/fancybox/demo/1_s.jpg" alt="" /></a>
    <a class="fancybox" href="http://nabble.nl/demo/fancybox/demo/2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="http://nabble.nl/demo/fancybox/demo/2_s.jpg" alt="" /></a>
    <a class="fancybox" href="http://nabble.nl/demo/fancybox/demo/3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="http://nabble.nl/demo/fancybox/demo/3_s.jpg" alt="" /></a>
    <a class="fancybox" href="http://nabble.nl/demo/fancybox/demo/4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="http://nabble.nl/demo/fancybox/demo/4_s.jpg" alt="" /></a>
</p>

JavaScript

$('a.fancybox')
    .fancybox({
        helpers : {
           thumbs : {
                width  : 50,
                height : 50
           }
        }
    });