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>
<script src="http://shadow.perm.ru/test/pioneer/js/libs/jquery.carouFredSel-6.2.1-packed.js"></script>
<div><a href="#" target="_self" class="fancy_modal">Fancybox slider</a></div><br>

<div id="product_item-slider" class="product_item-slider">
    <div id="product-wrapper">
        <div id="product-slider">
            <div id="product_slide-1" class="product_slide-item">
                <a 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>
            </div>
            <div id="product_slide-2" class="product_slide-item">
                <a href="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-2.jpg" rel="products-slider" target="_self" title="Перчатки Mighty MIG 2" class="fancybox_products">
                    <img alt="" src="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-2.jpg">
                </a>
            </div>
            <div id="product_slide-3" class="product_slide-item">
                <a href="http://shadow.perm.ru/test/pioneer/img/slider/product_slide-3.jpg" rel="products-slider" target="_self" title="Перчатки Mighty MIG 3"...

JavaScript

$(function() {
 
	$('#product-slider').carouFredSel({
		responsive: true,
		circular: false,
		auto: false,
		items: {
			visible: 1,
			width: 420,
			height: 420
		},
		scroll: {
			fx: 'directscroll'
		}
	});
 
	$('#product-thumbs').carouFredSel({
		responsive: true,
		circular: false,
		infinite: false,
		auto: false,
		items: {
			visible: {
				min: 2,
				max: 8
			},
			width: 90,
			height: 90
		}
	});
 
	$('#product-thumbs a').click(function() {
		$('#product-slider').trigger('slideTo', '#' + this.href.split('#').pop() );
		$('#product-thumbs a').removeClass('selected');
		$(this).addClass('selected');
		return false;
	});
 
});

var si = 0;
var st = 0;

$(".fancy_modal").click(function(){
    var index = $(this).index();
    $.fancybox({
        href: "#product_item-slider",
        padding: 0,
        margin: 0
        /*afterShow: function(){
            if (!si || !st) {
                $("#product-thumbs a").show();
            
                st = $("#product-thumbs").carouFredSel({
                    responsive: true,
                    circular: false,
                    infinite: false,
                    auto: false,
                    items: {
                        visible: {
                            min: 2,
                            max: 8
                        },
                        width: 90,
                        height: 90,
                    },
                });

                si = $("#product-slider").carouFredSel({
                    responsive: true,
                    circular: false,
                    auto: false,
                    items: {
                        visible: 1,
                        width: 420,
                        height: 420
                    },
                    scroll: {
                        fx: 'directscroll'
                    }
                });
            }
        }*/
    });
    // Долистать до текущего слайда
    //si.goToSlide(index);
   ...