97 lines
2.1 KiB
JavaScript
Executable File
97 lines
2.1 KiB
JavaScript
Executable File
var index = 1000;
|
|
var viewWidth, viewHeight, imgWidth, imgHeight, imgRatio, newWidth, newHeight, offsetX, offsetY, $newImage, galleryVisible, galleryHeight, galleryMargin, maxOffset, galleryCount;
|
|
|
|
function initGallery() {
|
|
viewWidth = $(window).width();
|
|
viewHeight = $(window).height();
|
|
|
|
galleryVisible = Math.floor((viewHeight - 220) / 140);
|
|
galleryHeight = galleryVisible * 140;
|
|
galleryMargin = (viewHeight - galleryHeight) /2;
|
|
galleryCount = $('#gallery_nav li').length;
|
|
maxOffset = (galleryCount - galleryVisible) * 140;
|
|
|
|
$('#gallery_scroll').css({
|
|
height: galleryHeight,
|
|
'margin-top': galleryMargin
|
|
});
|
|
|
|
resizeImage()
|
|
}
|
|
|
|
function resizeImage() {
|
|
imgWidth = $($newImage).height();
|
|
imgHeight = $($newImage).width();
|
|
|
|
imgRatio = imgWidth / imgHeight;
|
|
|
|
newWidth = viewWidth;
|
|
newHeight = newWidth * imgRatio;
|
|
|
|
offsetX = newWidth / 2;
|
|
offsetY = (newHeight - viewHeight) / 2;
|
|
|
|
$($newImage).attr('width',newWidth);
|
|
$($newImage).attr('height',newHeight);
|
|
|
|
$($newImage).css({
|
|
top: - offsetY
|
|
});
|
|
}
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
$(window).resize(function() {
|
|
initGallery();
|
|
});
|
|
|
|
initGallery();
|
|
|
|
|
|
|
|
$('#gallery_nav a').click(function(event) {
|
|
|
|
event.preventDefault();
|
|
index = index - 1;
|
|
|
|
var imgSrc = $(this).attr('href');
|
|
|
|
$('.gallery_wrap').append('<img src="' + imgSrc + '" style="z-index:' + index + '"/>');
|
|
$newImage = $('.gallery_wrap img');
|
|
|
|
$($newImage).load(function(){
|
|
resizeImage();
|
|
$('.gallery_wrap img').first().stop().fadeOut(500, function () {
|
|
$(this).remove();
|
|
});
|
|
});
|
|
$('#gallery_nav a').removeClass('active');
|
|
$(this).addClass('active');
|
|
});
|
|
|
|
|
|
|
|
var galleryOffset = 0;
|
|
|
|
$('#gallery_prev').click(function() {
|
|
if (galleryOffset <= -140) {
|
|
galleryOffset = galleryOffset + 140;
|
|
console.log(galleryOffset)
|
|
$('#gallery_nav').stop().animate({
|
|
top: galleryOffset
|
|
}, 250);
|
|
}
|
|
});
|
|
|
|
$('#gallery_next').click(function() {
|
|
if (galleryOffset > -maxOffset) {
|
|
galleryOffset = galleryOffset - 140;
|
|
console.log(galleryOffset)
|
|
$('#gallery_nav').stop().animate({
|
|
top: galleryOffset
|
|
}, 250);
|
|
}
|
|
});
|
|
}); |