ImageGallery

by Silambarasan_sundaram

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.0.4/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css">
<div class="photos">
            <a title="GOOGLE!" href="https://www.google.com/images/srpr/logo4w.png" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/f66cf2bba997313/180/180/fit"></a>
            <a title="MICROSOFT!!!" href="http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/36d8b240686ea33/180/180/fit"></a>
            <a title="" href="https://www.google.com/images/srpr/logo4w.png" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/e0986f42bd03cf4/180/180/fit"></a>
            <a title="" href="http://i.s-microsoft.com/global/ImageStore/PublishingImages/logos/hp/logo-lg-1x.png" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/1160ee763726480/180/180/fit"></a>
</div>

JavaScript

$(function() {
    $('a.photogallery').fancybox({
                   type:'image',
                   padding: 0,
                   scrolling: 'no',
                   helpers : {
                        overlay: {
                           css: {'background-color': '#000'},
                           opacity: 0.3
                        },
                        title : { type : 'inside' }
                   }
         });
});