fancybox modal thumb

by Vladislav Altyncev

HTML

<script src="http://shadow.perm.ru/test/pioneer/js/libs/jquery.fancybox.pack.js"></script>
<script src="http://shadow.perm.ru/test/pioneer/js/libs/jquery.fancybox-buttons.js"></script>
<script src="http://shadow.perm.ru/test/pioneer/js/libs/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="http://shadow.perm.ru/test/pioneer/css/libs/jquery.fancybox.css">
<link rel="stylesheet" href="http://shadow.perm.ru/test/pioneer/css/libs/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="http://shadow.perm.ru/test/pioneer/css/style.css">
<script src="http://shadow.perm.ru/test/pioneer/js/libs/jquery.fancybox-thumbs.js"></script>
<a data-thumbnail="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-min-1.jpg" href="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-1.jpg" rel="products-slider" target="_self" title="Перчатки Mighty MIG" class="fancybox_products">
    <img alt="" src="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-1.jpg">
</a>
<br>
<a data-thumbnail="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-min-2.jpg" href="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-2.jpg" rel="products-slider" target="_self" title="Перчатки Mighty MIG" class="fancybox_products">
    <img alt="" src="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-2.jpg">
</a>
<br>
    <a data-thumbnail="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-min-3.jpg" href="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-3.jpg" rel="products-slider" target="_self" title="Перчатки Mighty MIG" class="fancybox_products">
    <img alt="" src="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-3.jpg">
</a>

JavaScript

$('.fancybox_products')
	//.attr('rel', 'gallery')
	.fancybox({
		//wrapCSS     : 'fancybox_products-wrap',
		//modal: true,
		helpers: {
			title : {
                type : 'inside',
                position : 'top'  
            },
			thumbs: {
				type : 'inside',
                position : 'bottom',
				width  : 90,
				height : 90,
				source  : function(current) {
					return $(current.element).data('thumbnail');
			},
			overlay : {
                closeClick : true,
                speedOut   : 200,
                showEarly  : true,
                css        : { 'background': 'rgba(41, 48, 51, 0.9)' },
                locked     : true
            }
		},
		tpl: {
            closeBtn : '<a title="Close" class="fancybox-item fancybox-close f_modal-close" href="javascript:;"></a>',
        },
        wrapCSS: 'f_modal',
        padding: [61, 76, 61, 76]
	}
});