// Wechselgeschwindigkeit in sek var slideshowSpeed = 7000; // hinterlegen der Bildnamen // hinterlegen des SLideshow Contents var photos = [ { "title" : "Hotel...", "image" : "hotel-pfahlershof.jpg", "url" : "http://www.pfahlershof.com/hotel", "firstline" : "Hotel Pfahlershof", "secondline" : "Familienurlaub an der Nordsee" }, { "title" : "Familienurlaub...", "image" : "kinder-pfahlershof.jpg", "url" : "http://www.pfahlershof.com/kinderbetreuung", "firstline" : "Kinderbetreuung", "secondline" : "Urlaub für die ganze Familie" }, { "title" : "Lage und Anreise...", "image" : "landschaft-pfahlershof.jpg", "url" : "http://www.pfahlershof.com/lage-und-anreise", "firstline" : "Unser Standort", "secondline" : "Karolinenkoog/Tönning" }, { "title" : "Wellness", "image" : "wellnessurlaub.jpg", "url" : "http://www.pfahlershof.com/wellness-massagen", "firstline" : "Lot di dat gut gohn", "secondline" : "Entspannung, Gesundheit, Fitness" }, { "title" : "Ausflüge & Aktivitäten", "image" : "watt-wanderung.jpg", "url" : "http://www.pfahlershof.com/aktivitaten", "firstline" : "Ausflugsziele", "secondline" : "für die ganze Familie" }, { "title" : "Reiten & Tiere", "image" : "pferde-reiten.jpg", "url" : "http://www.pfahlershof.com/reiten", "firstline" : "Pferde Reiten", "secondline" : "Ziegen, Kaninchen..." } ]; $(document).ready(function() { // navigation button back $("#back").click(function() { stopAnimation(); navigate("back"); }); // navigation button forward $("#next").click(function() { stopAnimation(); navigate("next"); }); var interval; $("#control").toggle(function(){ stopAnimation(); }, function() { // funktion pause aufrufen $(this).css({ "background-image" : "url(http://www.pfahlershof.com/wp-content/themes/cms/images/slideshow/btn_pause.png)" }); // funktion next image navigate("next"); // funktion start slideshow interval = setInterval(function() { navigate("next"); }, slideshowSpeed); }); var activeContainer = 1; var currentImg = 0; var animating = false; var navigate = function(direction) { // pruefung des startes der animation if(animating) { return; } // pruefung der bildwiedergabe if(direction == "next") { currentImg++; if(currentImg == photos.length + 1) { currentImg = 1; } } else { currentImg--; if(currentImg == 0) { currentImg = photos.length; } } // container pruefung var currentContainer = activeContainer; if(activeContainer == 1) { activeContainer = 2; } else { activeContainer = 1; } showImage(photos[currentImg - 1], currentContainer, activeContainer); }; var currentZindex = -1; var showImage = function(photoObject, currentContainer, activeContainer) { animating = true; // sicherstellung der bilder als background currentZindex--; // festlegen des bildfades der slideshow bilder $("#slideshowimg" + activeContainer).css({ "background-image" : "url(http://www.pfahlershof.com/wp-content/themes/cms/images/slideshow/" + photoObject.image + ")", "display" : "block", "z-index" : currentZindex }); // verstecken des headertextes $("#headertxt").css({"display" : "none"}); // ausgabe slideshow content $("#firstline").html(photoObject.firstline); $("#secondline") .attr("href", photoObject.url) .html(photoObject.secondline); $("#moreinfo") .attr("href", photoObject.url) .html(photoObject.title); // Fade out // einblendung slideshow content $("#slideshowimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt").css({"display" : "block"}); animating = false; }, 500); }); }; var stopAnimation = function() { // play button colntrol $("#control").css({ "background-image" : "url(http://www.pfahlershof.com/wp-content/themes/cms/images/slideshow/btn_play.png)" }); // interval clearing clearInterval(interval); }; // weiter navigieren navigate("next"); // animations start interval = setInterval(function() { navigate("next"); }, slideshowSpeed); });