dio-v
10/22/2013 - 1:56 PM

imgs met fancybox en slider

imgs met fancybox en slider

$(document).ready(function () {    
    $('.bigImg').fancybox({
        'type': 'image',
        'width': 'auto',
        'height': 'auto',
        'autoDimensions': true,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'speedIn': 500,
        'speedOut': 500,
        'overlayShow': true,
        'hideOnContentClick': false,
        'overlayOpacity': 0.65,
        'cyclic': true,
        'overlayColor': '#000000',
        'showNavArrows': true,
        'titleFromAlt': true,
        'titleShow': true,
        'titlePosition': 'inside'
    });

    if ($('.bigImg').length > 1) {
        var vAmount = $('.bigImg').length;
        var vActive = 1;
        $('.bigImg').each(function (index) {
            var vT = $(this);
            if(index == 0){vT.css('z-index',11)}
        });
        $('.bigImgWrap').append('<a href="#" class="vorige">vorige</a><a href="#" class="volgende">volgende</a>');
        $('.bigImgWrap .volgende').click(function () {
            var vNext = vActive + 1;
            if (vNext > vAmount) { vNext = 1 }
            $('.bigImg:nth-child(' + vNext + ')').css('z-index', 10);
            $('.bigImg:nth-child(' + vActive + ')').fadeOut(function () {
                $('.bigImg:nth-child(' + vNext + ')').css('z-index', 11);
                vActive = vNext;
                $(this).css('z-index',9).fadeIn();
            });
            return false;
        });
        $('.bigImgWrap .vorige').click(function () {
            var vNext = vActive - 1;
            if (vNext == 0) { vNext = vAmount }
            $('.bigImg:nth-child(' + vNext + ')').css('z-index', 10);
            $('.bigImg:nth-child(' + vActive + ')').fadeOut(function () {
                $('.bigImg:nth-child(' + vNext + ')').css('z-index', 11);
                vActive = vNext;
                $(this).css('z-index', 9).fadeIn();
            });
            return false;
        });
    }
});
            <div class="bigImgWrap">
            
                    <a id="ctl00_ContentPlaceHolder1_rptImages_ctl00_hlEnlarge" title="Quickstep Classic - Panga tweeplank - QST 027" class="bigImg" rel="group1" href="../../afbeeldingen/quickstep/QST027.jpg?preset=large" target="_blank"><img id="ctl00_ContentPlaceHolder1_rptImages_ctl00_imgAsset" src="../../afbeeldingen/quickstep/QST027.jpg?preset=detailpage" alt="Quickstep Classic - Panga tweeplank - QST 027" style="border-width:0px;" /></a>        
                
                    <a id="ctl00_ContentPlaceHolder1_rptImages_ctl01_hlEnlarge" title="Quickstep Classic - Panga tweeplank - QST 027" class="bigImg" rel="group1" href="../../afbeeldingen/quickstep/QST027_1.jpg?preset=large" target="_blank"><img id="ctl00_ContentPlaceHolder1_rptImages_ctl01_imgAsset" src="../../afbeeldingen/quickstep/QST027.jpg?preset=detailpage" alt="Quickstep Classic - Panga tweeplank - QST 027" style="border-width:0px;" /></a>        
                
            </div>
.bigImgWrap{
    position:relative;
    height:300px;
    margin-bottom:10px;
    .volgende, .vorige{
        text-indent:-9999px;
        display:block;
        position:absolute;
        top:130px;
        width:23px;
        height:56px;
        z-index:11;
    }
    .volgende{
        background:url('/img/arrowBigRight.png') no-repeat center center;
        right:0;
    }
    .vorige{
        background:url('/img/arrowBigLeft.png') no-repeat center center;
        left:0;
    }
}
.bigImg{
    position:absolute;
    left:0;
    top:0;
    z-index:9;

}