419 lines
12 KiB
JavaScript
419 lines
12 KiB
JavaScript
/**
|
|
* Created by CS medien- & kommunikationssysteme.
|
|
* @author Christian Steinle
|
|
* @date 24.12.2016
|
|
*
|
|
* @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
|
|
*/
|
|
|
|
$(document).ready(function () {
|
|
carColor.init();
|
|
slider.init();
|
|
kenBurns.init();
|
|
thumbPage.init();
|
|
});
|
|
|
|
$(window).resize(function () {
|
|
slider.initVariables();
|
|
kenBurns.initVariables();
|
|
thumbPage.init();
|
|
});
|
|
|
|
var slider = {
|
|
interval: null,
|
|
displayTime: 4000,
|
|
animationTime: 400,
|
|
|
|
actualImageID: -1,
|
|
actualImage: null,
|
|
nextImageID: 0,
|
|
nextImage: null,
|
|
countImages: 0,
|
|
|
|
animationWidth: 0,
|
|
animationHeight: 0,
|
|
|
|
sliderElement: null,
|
|
sliderImages: null,
|
|
|
|
availableAnimations: [
|
|
'left',
|
|
'top',
|
|
'width',
|
|
'height',
|
|
'opacity'
|
|
],
|
|
animation: {},
|
|
|
|
|
|
init: function () {
|
|
slider.initElements();
|
|
slider.initVariables();
|
|
slider.interval = window.setInterval(slider.doAnimation, slider.displayTime);
|
|
},
|
|
|
|
|
|
initElements: function () {
|
|
slider.sliderElement = $('.slider');
|
|
slider.sliderImages = $('img', slider.sliderElement);
|
|
},
|
|
|
|
|
|
initVariables: function () {
|
|
slider.countImages = slider.sliderImages.length;
|
|
if (slider.countImages === 0) {
|
|
return false;
|
|
}
|
|
slider.animationWidth = slider.sliderElement.width();
|
|
slider.animationHeight = keyVisualData.height * slider.animationWidth / keyVisualData.width;
|
|
slider.sliderElement.css('height', slider.animationHeight);
|
|
slider.setNextImages();
|
|
},
|
|
|
|
|
|
setNextImages: function () {
|
|
++slider.actualImageID;
|
|
++slider.nextImageID;
|
|
|
|
if (slider.actualImageID === slider.countImages) {
|
|
slider.actualImageID = 0;
|
|
}
|
|
|
|
if (slider.nextImageID === slider.countImages) {
|
|
slider.nextImageID = 0;
|
|
}
|
|
|
|
slider.actualImage = $(slider.sliderImages[slider.actualImageID]);
|
|
slider.nextImage = $(slider.sliderImages[slider.nextImageID]);
|
|
},
|
|
|
|
|
|
doAnimation: function () {
|
|
if (slider.countImages < 2) {
|
|
return false;
|
|
}
|
|
|
|
var animationKey = Math.floor(Math.random() * slider.availableAnimations.length);
|
|
var animationName = slider.availableAnimations[animationKey];
|
|
|
|
slider.resetUnusedImages();
|
|
|
|
switch (animationName) {
|
|
case 'left':
|
|
slider.getShiftLeft();
|
|
break;
|
|
case 'top':
|
|
slider.getShiftTop();
|
|
break;
|
|
case 'width':
|
|
slider.getWidth();
|
|
break;
|
|
case 'height':
|
|
slider.getHeight();
|
|
break;
|
|
case 'opacity':
|
|
slider.getOpacity();
|
|
break;
|
|
default:
|
|
slider.getShiftLeft();
|
|
break;
|
|
}
|
|
|
|
slider.actualImage.show().animate(slider.animation.actual, slider.animationTime);
|
|
slider.nextImage.show().animate(slider.animation.next, slider.animationTime);
|
|
|
|
slider.setNextImages();
|
|
},
|
|
|
|
resetUnusedImages: function () {
|
|
slider.sliderImages.each(function (imageID, imageElement) {
|
|
var image = $(imageElement);
|
|
|
|
if (imageID !== slider.actualImageID && imageID !== slider.nextImageID) {
|
|
image.hide();
|
|
}
|
|
|
|
image.css({
|
|
left: 0,
|
|
top: 0,
|
|
width: slider.animationWidth,
|
|
height: slider.animationHeight,
|
|
opacity: 1
|
|
});
|
|
|
|
});
|
|
},
|
|
|
|
|
|
getShiftLeft: function () {
|
|
slider.nextImage.css({left: slider.animationWidth});
|
|
slider.animation.next = {left: 0};
|
|
slider.animation.actual = {left: -1 * slider.animationWidth, opacity: 0};
|
|
},
|
|
|
|
|
|
getShiftTop: function () {
|
|
slider.nextImage.css({top: slider.animationHeight});
|
|
slider.animation.next = {top: 0};
|
|
slider.animation.actual = {top: -1 * slider.animationHeight, opacity: 0};
|
|
},
|
|
|
|
|
|
getWidth: function () {
|
|
slider.nextImage.css({width: 0, left: slider.animationWidth / 2, opacity: 0});
|
|
slider.animation.next = {width: slider.animationWidth, left: 0, opacity: 1};
|
|
slider.animation.actual = {width: 0, left: slider.animationWidth / 2, opacity: 0};
|
|
},
|
|
|
|
|
|
getHeight: function () {
|
|
slider.nextImage.css({height: 0, top: slider.animationHeight / 2, opacity: 0});
|
|
slider.animation.next = {height: slider.animationHeight, top: 0, opacity: 1};
|
|
slider.animation.actual = {height: 0, top: slider.animationHeight / 2, opacity: 0};
|
|
},
|
|
|
|
|
|
getOpacity: function () {
|
|
slider.nextImage.css({opacity: 0});
|
|
slider.animation.next = {opacity: 1};
|
|
slider.animation.actual = {opacity: 0};
|
|
}
|
|
};
|
|
|
|
|
|
var kenBurns = {
|
|
interval: null,
|
|
displayTime: 5000,
|
|
animationTime: 400,
|
|
scaleFactor: 1.2,
|
|
|
|
actualImageID: -1,
|
|
actualImage: null,
|
|
nextImageID: 0,
|
|
nextImage: null,
|
|
countImages: 0,
|
|
|
|
animationWidth: 0,
|
|
animationHeight: 0,
|
|
|
|
kenBurnsElement: null,
|
|
kenBurnsImages: null,
|
|
|
|
animationParams: {},
|
|
|
|
|
|
init: function () {
|
|
kenBurns.initElements();
|
|
kenBurns.initVariables();
|
|
kenBurns.resetUnusedImages(true);
|
|
kenBurns.doAnimation();
|
|
kenBurns.interval = window.setInterval(kenBurns.doAnimation, kenBurns.displayTime);
|
|
},
|
|
|
|
|
|
initElements: function () {
|
|
kenBurns.kenBurnsElement = $('.kenburns');
|
|
kenBurns.kenBurnsImages = $('img', kenBurns.kenBurnsElement);
|
|
},
|
|
|
|
|
|
initVariables: function () {
|
|
kenBurns.countImages = kenBurns.kenBurnsImages.length;
|
|
if (kenBurns.countImages === 0) {
|
|
return false;
|
|
}
|
|
kenBurns.animationWidth = kenBurns.kenBurnsElement.width();
|
|
kenBurns.animationHeight = keyVisualData.height * kenBurns.animationWidth / keyVisualData.width;
|
|
kenBurns.kenBurnsElement.css('height', kenBurns.animationHeight);
|
|
kenBurns.setNextImages();
|
|
},
|
|
|
|
|
|
setNextImages: function () {
|
|
++kenBurns.actualImageID;
|
|
++kenBurns.nextImageID;
|
|
|
|
if (kenBurns.actualImageID === kenBurns.countImages) {
|
|
kenBurns.actualImageID = 0;
|
|
}
|
|
|
|
if (kenBurns.nextImageID === kenBurns.countImages) {
|
|
kenBurns.nextImageID = 0;
|
|
}
|
|
|
|
kenBurns.actualImage = $(kenBurns.kenBurnsImages[kenBurns.actualImageID]);
|
|
kenBurns.nextImage = $(kenBurns.kenBurnsImages[kenBurns.nextImageID]);
|
|
},
|
|
|
|
|
|
doAnimation: function () {
|
|
if (kenBurns.countImages < 2) {
|
|
return false;
|
|
}
|
|
|
|
kenBurns.resetUnusedImages(false);
|
|
kenBurns.getAnimationParams();
|
|
|
|
kenBurns.setNextImages();
|
|
},
|
|
|
|
|
|
resetUnusedImages: function (doAll) {
|
|
kenBurns.kenBurnsImages.each(function (imageID, imageElement) {
|
|
var image = $(imageElement);
|
|
|
|
if ((imageID !== kenBurns.actualImageID && imageID !== kenBurns.nextImageID) || doAll === true) {
|
|
|
|
var imageWidth = kenBurns.animationWidth;
|
|
var imageHeight = kenBurns.animationHeight;
|
|
if (image.data('zoom') === 'out') {
|
|
imageWidth = kenBurns.animationWidth * kenBurns.scaleFactor;
|
|
imageHeight = kenBurns.animationHeight * kenBurns.scaleFactor;
|
|
}
|
|
|
|
switch (image.data('start')) {
|
|
case 'nw' :
|
|
image.css({left: 0, top: 0, right: '', bottom: ''});
|
|
break;
|
|
|
|
case 'n':
|
|
image.css({left: (kenBurns.animationWidth - imageWidth) / 2, top: 0, right: '', bottom: ''});
|
|
break;
|
|
|
|
case 'ne':
|
|
image.css({left: '', top: 0, right: 0, bottom: ''});
|
|
break;
|
|
|
|
case 'e':
|
|
image.css({left: '', top: (kenBurns.animationHeight - imageHeight) / 2, right: 0, bottom: ''});
|
|
break;
|
|
|
|
case 'se':
|
|
image.css({left: '', top: '', right: 0, bottom: 0});
|
|
break;
|
|
|
|
case 's' :
|
|
image.css({left: (kenBurns.animationWidth - imageWidth) / 2, top: '', right: '', bottom: 0});
|
|
break;
|
|
|
|
case 'sw':
|
|
image.css({left: 0, top: '', right: '', bottom: 0});
|
|
break;
|
|
|
|
case 'w':
|
|
image.css({left: 0, top: (kenBurns.animationHeight - imageHeight) / 2, right: '', bottom: ''});
|
|
break;
|
|
|
|
case 'c':
|
|
image.css({
|
|
left: (kenBurns.animationWidth - imageWidth) / 2,
|
|
top: (kenBurns.animationHeight - imageHeight) / 2,
|
|
right: '',
|
|
bottom: ''
|
|
});
|
|
break;
|
|
}
|
|
|
|
image.css({width: imageWidth, height: imageHeight, opacity: 0, zIndex: 0});
|
|
}
|
|
|
|
|
|
});
|
|
},
|
|
|
|
|
|
getAnimationParams: function () {
|
|
var cssObject = {};
|
|
var image = kenBurns.actualImage;
|
|
image.css('zIndex', 1);
|
|
cssObject.width = kenBurns.animationWidth;
|
|
cssObject.height = kenBurns.animationHeight;
|
|
if (image.data('zoom') === 'in') {
|
|
cssObject.width = kenBurns.animationWidth * kenBurns.scaleFactor;
|
|
cssObject.height = kenBurns.animationHeight * kenBurns.scaleFactor;
|
|
}
|
|
|
|
switch (image.data('start')) {
|
|
case 'n':
|
|
cssObject.left = (kenBurns.animationWidth - cssObject.width) / 2;
|
|
break;
|
|
|
|
case 'e':
|
|
cssObject.top = (kenBurns.animationHeight - cssObject.height) / 2;
|
|
break;
|
|
|
|
case 's' :
|
|
cssObject.left = (kenBurns.animationWidth - cssObject.width) / 2;
|
|
break;
|
|
|
|
case 'w':
|
|
cssObject.top = (kenBurns.animationHeight - cssObject.height) / 2;
|
|
break;
|
|
|
|
case 'c':
|
|
cssObject.left = (kenBurns.animationWidth - cssObject.width) / 2;
|
|
cssObject.top = (kenBurns.animationHeight - cssObject.height) / 2;
|
|
break;
|
|
}
|
|
|
|
cssObject.opacity = 4;
|
|
|
|
image.animate(
|
|
cssObject
|
|
, 7000, 'swing', function () {
|
|
image.animate({
|
|
opacity: 0
|
|
}, 1000, 'swing')
|
|
})
|
|
}
|
|
|
|
};
|
|
|
|
|
|
var carColor = {
|
|
activePreview: 0,
|
|
previewElement: null,
|
|
previewImages: null,
|
|
thumbElement: null,
|
|
thumbImages: null,
|
|
|
|
|
|
init: function () {
|
|
carColor.initVariables();
|
|
carColor.thumbImages.on('mouseenter', function () {
|
|
$(carColor.previewImages.get(carColor.activePreview)).hide();
|
|
carColor.activePreview = parseInt($(this).data('thumb'));
|
|
$(carColor.previewImages.get(carColor.activePreview)).css('display', 'block');
|
|
});
|
|
},
|
|
|
|
|
|
initVariables: function () {
|
|
carColor.previewElement = $('.car-color');
|
|
carColor.previewImages = $('img', carColor.previewElement);
|
|
carColor.thumbElement = $('.car-color-thumbs');
|
|
carColor.thumbImages = $('img', carColor.thumbElement);
|
|
}
|
|
};
|
|
|
|
|
|
var thumbPage = {
|
|
init: function () {
|
|
var thumbElement = $('.thumbPage');
|
|
var thumbImages = $('.thumbnail', '.thumbPage');
|
|
var left = 0;
|
|
|
|
if (thumbElement.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
$('.clearfix', thumbElement).remove();
|
|
|
|
$.each(thumbImages, function (key, image) {
|
|
if ($(image).offset().left <= left) {
|
|
$(image).parent().before('<div class="clearfix"></div>');
|
|
}
|
|
left = $(image).offset().left;
|
|
});
|
|
}
|
|
}; |