439 lines
13 KiB
JavaScript
439 lines
13 KiB
JavaScript
$(document).ready(function(){
|
|
$('a').on('click', function(event) {
|
|
if (this.hash !== "") {
|
|
event.preventDefault();
|
|
var hash = this.hash;
|
|
$('html, body').animate({
|
|
scrollTop: $(hash).offset().top - 80
|
|
}, 800, function(){
|
|
window.location.hash = hash;
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// $(function() {
|
|
// $(window).on('resize', function(e) {
|
|
// if (screen.width < screen.height){
|
|
// $('.section--preview').addClass('horizontal');
|
|
// }else{
|
|
// $('.section--preview').removeClass('horizontal');
|
|
// }
|
|
// });
|
|
// })
|
|
|
|
init();
|
|
|
|
function init() {
|
|
let state = 0;
|
|
|
|
// if (screen.width < screen.height){
|
|
// $('.section--preview').addClass('horizontal');
|
|
// }else{
|
|
// $('.section--preview').removeClass('horizontal');
|
|
// }
|
|
|
|
$('.js-prev-slide').click(function() {
|
|
if(state - 1 == -1){state = 2;}else{state = state - 1;}
|
|
swiper(state,0);
|
|
});
|
|
$('.js-next-slide').click(function() {
|
|
if(state + 1 == 3){state = 0;}else{state = state + 1;}
|
|
swiper(state,1);
|
|
});
|
|
|
|
$('.js-menu-object').click(function() {
|
|
closeSequence($('body').find('.section--block' + $(this).attr('href')));
|
|
});
|
|
$('.js-menu-detail').click(function() {
|
|
menuControl($('body').find('.section--block' + $(this).attr('href')), "detail");
|
|
});
|
|
$('.js-menu-gallery').click(function() {
|
|
menuControl($('body').find('.section--block' + $(this).attr('href')), "gallery");
|
|
});
|
|
$('.js-menu-price').click(function() {
|
|
menuControl($('body').find('.section--block' + $(this).attr('href')), "price");
|
|
});
|
|
|
|
$('.js-left-open').click(function() {
|
|
let position;
|
|
if (screen.width > 1200){position = 50;}else{position = 0;}
|
|
if($(this).closest('.section').hasClass('section--switch')){
|
|
$(this).closest('.section').find('.section__left').css('left',position + '%');
|
|
}else{
|
|
$(this).closest('.section').find('.section__left').css('left','0%');
|
|
}
|
|
});
|
|
$('.js-left-close').click(function() {
|
|
let position1;
|
|
let position2;
|
|
if (screen.width > 1200){position1 = 0;position2 = -50;}else{position1 = -100;position2 = -100;}
|
|
if($(this).closest('.section').hasClass('section--switch')){
|
|
$(this).closest('.section').find('.section__left').css('left',position1 + '%');
|
|
}else{
|
|
$(this).closest('.section').find('.section__left').css('left',position2 + '%');
|
|
}
|
|
});
|
|
$('.js-gallery-open').click(function() {
|
|
const x = $(this).closest('.section').find('.section__gallery');
|
|
x.addClass('is-open');
|
|
if(!x.hasClass('loaded')){loadGallery(this,x.attr('data-object'),x.attr('data-items'));}
|
|
});
|
|
$('.js-gallery-close').click(function() {
|
|
$(this).closest('.section').find('.section__gallery').removeClass('is-open');
|
|
});
|
|
$('.js-right-open').click(function() {
|
|
let position;
|
|
if (screen.width > 1200){position = 50;}else{position = 0;}
|
|
if($(this).closest('.section').hasClass('section--switch')){
|
|
$(this).closest('.section').find('.section__right').css('left',position + '%');
|
|
}else{
|
|
$(this).closest('.section').find('.section__right').css('left','0%');
|
|
}
|
|
});
|
|
$('.js-right-close').click(function() {
|
|
let position;
|
|
if (screen.width > 1200){position = 50}else{position = 100;}
|
|
if($(this).closest('.section').hasClass('section--switch')){
|
|
$(this).closest('.section').find('.section__right').css('left','100%');
|
|
}else{
|
|
$(this).closest('.section').find('.section__right').css('left',position + '%');
|
|
}
|
|
});
|
|
|
|
$('.js-preview-close').click(function() {
|
|
$('body').removeClass('noscroll');
|
|
$('body').find('.section--preview').removeClass('is-open');
|
|
});
|
|
|
|
$('.js-preview-prev').click(function() {
|
|
let data = $(this).closest('.section--preview');
|
|
let x = Number(data.attr('data-object'));
|
|
let y = Number(data.attr('data-item'));
|
|
let z = Number(data.attr('data-items'));
|
|
galleryControl(x,0,y,z);
|
|
});
|
|
|
|
$('.js-preview-next').click(function() {
|
|
let data = $(this).closest('.section--preview');
|
|
let x = Number(data.attr('data-object'));
|
|
let y = Number(data.attr('data-item'));
|
|
let z = Number(data.attr('data-items'));
|
|
galleryControl(x,1,y,z);
|
|
});
|
|
|
|
$('.js-menu-button').click(function() {
|
|
if($(this).hasClass('is-active')){
|
|
$(this).removeClass('is-active');
|
|
$('body').removeClass('noscroll');
|
|
$('body').find('.header').removeClass('is-open');
|
|
}else{
|
|
$(this).addClass('is-active');
|
|
$('body').addClass('noscroll');
|
|
$('body').find('.header').addClass('is-open');
|
|
}
|
|
});
|
|
|
|
$('.js-menu-close').click(function() {
|
|
$('body').find('.header').removeClass('is-open');
|
|
$('body').find('.js-menu-button').removeClass('is-active');
|
|
$('body').removeClass('noscroll');
|
|
});
|
|
}
|
|
|
|
function swiper(e,f) {
|
|
const a = $('.js-slide-one');
|
|
const b = $('.js-slide-two');
|
|
const c = $('.js-slide-three');
|
|
|
|
if (e == 1) {
|
|
if (f == 1) {
|
|
$(a).css('zIndex','1');
|
|
$(c).css('zIndex','-1');
|
|
} else {
|
|
$(a).css('zIndex','-1');
|
|
$(c).css('zIndex','1');
|
|
}
|
|
$(b).css('zIndex','1');
|
|
$(a).css('left','-100%');
|
|
$(b).css('left','0%');
|
|
$(c).css('left','100%');
|
|
} else if (e == 2) {
|
|
if (f == 1) {
|
|
$(b).css('zIndex','1');
|
|
$(a).css('zIndex','-1');
|
|
} else {
|
|
$(b).css('zIndex','-1');
|
|
$(a).css('zIndex','1');
|
|
}
|
|
$(c).css('zIndex','1');
|
|
$(a).css('left','100%');
|
|
$(b).css('left','-100%');
|
|
$(c).css('left','0%');
|
|
} else {
|
|
if (f == 1) {
|
|
$(c).css('zIndex','1');
|
|
$(b).css('zIndex','-1');
|
|
} else {
|
|
$(c).css('zIndex','-1');
|
|
$(b).css('zIndex','1');
|
|
}
|
|
$(a).css('zIndex','1');
|
|
$(a).css('left','0%');
|
|
$(b).css('left','100%');
|
|
$(c).css('left','-100%');
|
|
}
|
|
}
|
|
|
|
function loadGallery(item,object,maxItems){
|
|
let imageUrls = [];
|
|
const loadImage = src =>
|
|
new Promise((resolve, reject) => {
|
|
const img = new Image();
|
|
img.onload = () => resolve(img);
|
|
img.onerror = reject;
|
|
img.src = src;
|
|
})
|
|
;
|
|
|
|
switch(Number(object)) {
|
|
case 0:
|
|
imageUrls = [
|
|
"img/gallery/statek/1.webp",
|
|
"img/gallery/statek/2.webp",
|
|
"img/gallery/statek/3.webp",
|
|
"img/gallery/statek/4.webp",
|
|
"img/gallery/statek/5.webp",
|
|
"img/gallery/statek/6.webp",
|
|
"img/gallery/statek/7.webp",
|
|
"img/gallery/statek/8.webp",
|
|
"img/gallery/statek/9.webp",
|
|
"img/gallery/statek/10.webp",
|
|
"img/gallery/statek/11.webp",
|
|
"img/gallery/statek/12.webp",
|
|
"img/gallery/statek/13.webp",
|
|
"img/gallery/statek/14.webp",
|
|
"img/gallery/statek/15.webp",
|
|
"img/gallery/statek/16.webp",
|
|
"img/gallery/statek/17.webp",
|
|
"img/gallery/statek/18.webp",
|
|
"img/gallery/statek/19.webp",
|
|
"img/gallery/statek/20.webp",
|
|
"img/gallery/statek/21.webp",
|
|
"img/gallery/statek/22.webp",
|
|
"img/gallery/statek/23.webp",
|
|
"img/gallery/statek/24.webp"
|
|
];
|
|
break;
|
|
case 1:
|
|
imageUrls = [
|
|
"img/gallery/penzion/1.webp",
|
|
"img/gallery/penzion/2.webp",
|
|
"img/gallery/penzion/3.webp",
|
|
"img/gallery/penzion/4.webp",
|
|
"img/gallery/penzion/5.webp",
|
|
"img/gallery/penzion/6.webp",
|
|
"img/gallery/penzion/7.webp",
|
|
"img/gallery/penzion/8.webp",
|
|
"img/gallery/penzion/9.webp",
|
|
"img/gallery/penzion/10.webp",
|
|
"img/gallery/penzion/11.webp",
|
|
"img/gallery/penzion/12.webp",
|
|
"img/gallery/penzion/13.webp",
|
|
"img/gallery/penzion/14.webp",
|
|
"img/gallery/penzion/15.webp",
|
|
"img/gallery/penzion/16.webp",
|
|
"img/gallery/penzion/17.webp",
|
|
"img/gallery/penzion/18.webp",
|
|
"img/gallery/penzion/19.webp",
|
|
"img/gallery/penzion/20.webp",
|
|
"img/gallery/penzion/21.webp",
|
|
"img/gallery/penzion/22.webp",
|
|
"img/gallery/penzion/23.webp",
|
|
"img/gallery/penzion/24.webp"
|
|
];
|
|
break;
|
|
case 2:
|
|
imageUrls = [
|
|
"img/gallery/chata/1.webp",
|
|
"img/gallery/chata/2.webp",
|
|
"img/gallery/chata/3.webp",
|
|
"img/gallery/chata/4.webp",
|
|
"img/gallery/chata/5.webp",
|
|
"img/gallery/chata/6.webp",
|
|
"img/gallery/chata/7.webp",
|
|
"img/gallery/chata/8.webp",
|
|
"img/gallery/chata/9.webp",
|
|
"img/gallery/chata/10.webp",
|
|
"img/gallery/chata/11.webp",
|
|
"img/gallery/chata/12.webp",
|
|
"img/gallery/chata/13.webp",
|
|
"img/gallery/chata/14.webp",
|
|
"img/gallery/chata/15.webp",
|
|
"img/gallery/chata/16.webp",
|
|
"img/gallery/chata/17.webp",
|
|
"img/gallery/chata/18.webp",
|
|
"img/gallery/chata/19.webp",
|
|
"img/gallery/chata/20.webp",
|
|
"img/gallery/chata/21.webp",
|
|
"img/gallery/chata/22.webp",
|
|
"img/gallery/chata/23.webp",
|
|
"img/gallery/chata/24.webp"
|
|
];
|
|
break;
|
|
case 3:
|
|
imageUrls = [
|
|
"img/gallery/statek/6.webp",
|
|
"img/gallery/statek/w1.webp",
|
|
"img/gallery/statek/w2.webp",
|
|
"img/gallery/statek/w6.webp",
|
|
"img/gallery/statek/w3.webp",
|
|
"img/gallery/statek/w4.webp",
|
|
"img/gallery/statek/3.webp",
|
|
"img/gallery/statek/9.webp",
|
|
"img/gallery/statek/8.webp",
|
|
"img/gallery/statek/7.webp",
|
|
"img/gallery/statek/11.webp",
|
|
"img/gallery/statek/w5.webp"
|
|
];
|
|
}
|
|
|
|
Promise.all(imageUrls.map(loadImage)).then(images => {
|
|
let count = 1;
|
|
images.forEach((image, i) =>{
|
|
$(item).closest('.section').find('.gallery').append($('<div class="gallery__item js-gallery-item" data-order="' + count + '"></div>').append(image));
|
|
if(count == maxItems){
|
|
$(item).closest('.section').find('.section__gallery').addClass('loaded');
|
|
$('.js-gallery-item').click(function() {
|
|
let z;
|
|
let x = $('body').find('.section--preview');
|
|
let y = Number($(this).attr('data-order'));
|
|
let w = Number($(item).closest('.section').find('.section__gallery').attr('data-items'));
|
|
let c = $(this).closest('.section').attr('id');
|
|
|
|
if(c == "statek"){z = 0;}else if(c == "penzion"){z = 1;}else if(c == "chata"){z = 2;}else{z = 3;}
|
|
$('body').addClass('noscroll');
|
|
x.attr('data-object',z);
|
|
x.attr('data-item',y);
|
|
x.attr('data-items',w);
|
|
x.find('img').attr('src',$(this).find('img').attr('src'));
|
|
x.addClass('is-open');
|
|
});
|
|
}
|
|
count = count + 1;
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
function galleryControl(e,f,g,h) {
|
|
let object;
|
|
let next = loopControl(g, f, h);
|
|
|
|
switch(e) {
|
|
case 0:
|
|
object = "statek";
|
|
break;
|
|
case 1:
|
|
object = "penzion";
|
|
break;
|
|
case 2:
|
|
object = "chata";
|
|
break;
|
|
case 3:
|
|
object = "statek";
|
|
}
|
|
$('body').find('.section--preview').attr('data-item',next);
|
|
if(e==3){
|
|
switch(next) {
|
|
case 1:
|
|
next = "6";
|
|
break;
|
|
case 2:
|
|
next = "w1";
|
|
break;
|
|
case 3:
|
|
next = "w2";
|
|
break;
|
|
case 4:
|
|
next = "w6";
|
|
break;
|
|
case 5:
|
|
next = "w3";
|
|
break;
|
|
case 6:
|
|
next = "w4";
|
|
break;
|
|
case 7:
|
|
next = "3";
|
|
break;
|
|
case 8:
|
|
next = "9";
|
|
break;
|
|
case 9:
|
|
next = "8";
|
|
break;
|
|
case 10:
|
|
next = "7";
|
|
break;
|
|
case 11:
|
|
next = "11";
|
|
break;
|
|
case 12:
|
|
next = "w5";
|
|
}
|
|
}
|
|
$('body').find('.section--preview').find('img').attr('src','img/gallery/' + object + '/' + next + '.webp');
|
|
}
|
|
|
|
function loopControl(e,f,g) {
|
|
if(f){if(g+1==e+1){e=1;}else{e=e+1;}}else{if(0==e-1){e=g;}else{e=e-1;}}return e;
|
|
}
|
|
|
|
function menuControl(e,f) {
|
|
let position;
|
|
if (screen.width > 1200){position = 50;}else{position = 0}
|
|
closeSequence(e);
|
|
|
|
if(f=="detail"){
|
|
if(e.hasClass('section--switch')){
|
|
e.find('.section__left').css('left',position+'%');
|
|
}else{
|
|
e.find('.section__left').css('left','0%');
|
|
}
|
|
}else if(f=="gallery"){
|
|
let x = e.find('.section__gallery');
|
|
x.addClass('is-open');
|
|
if(!x.hasClass('loaded')){loadGallery(e,x.attr('data-object'),x.attr('data-items'));}
|
|
}else{
|
|
if(e.hasClass('section--switch')){
|
|
e.find('.section__right').css('left',position+'%');
|
|
}else{
|
|
e.find('.section__right').css('left','0%');
|
|
}
|
|
}
|
|
}
|
|
|
|
function closeSequence(e) {
|
|
let position1;
|
|
let position2;
|
|
let position3;
|
|
let position4;
|
|
if (screen.width > 1200){position1 = 0;position2 = 100;position3 = -50;position4 = 50;}else{position1 = -100;position2 = 100;position3 = -100;position4 = 100;}
|
|
|
|
if($('body').find('.header').hasClass('is-open')){
|
|
$('body').removeClass('noscroll');
|
|
$('body').find('.header').removeClass('is-open');
|
|
$('body').find('.js-menu-button').removeClass('is-active');
|
|
}
|
|
|
|
if(e.hasClass('section--switch')){
|
|
e.find('.section__left').css('left',position1+'%');
|
|
e.find('.section__right').css('left',position2+'%');
|
|
}else{
|
|
e.find('.section__left').css('left',position3+'%');
|
|
e.find('.section__right').css('left',position4+'%');
|
|
}
|
|
e.find('.section__gallery').removeClass('is-open');
|
|
}
|