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;
}