/* * Author: Marco Kuiper (http://www.marcofolio.net/) */ // Speed of the automatic slideshow var slideshowSpeed = 10000; var photos = [ { "title" : "Saint Laurent sur Mer ", "image" : "photo_143.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Château de Balleroy", "image" : "photo_145.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Produits de la mer", "image" : "photo_116.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Les marais de l'Aure", "image" : "photo_71.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Les marais innondés", "image" : "photo_87.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "La Forêt de Cerisy", "image" : "photo_141.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "DDay Festival V.Meigne", "image" : "photo_113.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Animations à la forêt de Cerisy ", "image" : "photo_144.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Bol d'air pur à la campagne", "image" : "photo_89.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Kayak en mer", "image" : "photo_128.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Activités de l'Ecole de Voile ", "image" : "photo_44.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "La Pointe du Hoc", "image" : "photo_16.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Kayak Pointe du Hoc", "image" : "photo_127.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Port de Grandcamp-Maisy ", "image" : "photo_148.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Château de Balleroy", "image" : "photo_149.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Veaux de race normande", "image" : "photo_41.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Le cimetière US de Colleville-sur-Me", "image" : "photo_142.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Grandcamp-Maisy Linroc Image", "image" : "photo_129.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "", "image" : "photo_15.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "", "image" : "photo_150.jpg", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "Colleville-sur-Mer", "image" : "photo_139.JPG", "url" : "", "firstline" : "", "secondline" : "" } , { "title" : "La pêche à la crevette", "image" : "photo_64.jpg", "url" : "", "firstline" : "", "secondline" : "" } ]; $(document).ready(function() { // Backwards navigation $("#back").click(function() { stopAnimation(); navigate("back"); }); // Forward navigation $("#next").click(function() { stopAnimation(); navigate("next"); }); var interval; $("#control").toggle(function(){ stopAnimation(); }, function() { // Change the background image to "pause" $(this).css({ "background-image" : "url(images/btn_pause.png)" }); // Show the next image navigate("next"); // Start playing the animation interval = setInterval(function() { navigate("next"); }, slideshowSpeed); }); var activeContainer = 1; var currentImg = 0; var animating = false; var navigate = function(direction) { // Check if no animation is running. If it is, prevent the action if(animating) { return; } // Check which current image we need to show if(direction == "next") { currentImg++; if(currentImg == photos.length + 1) { currentImg = 1; } } else { currentImg--; if(currentImg == 0) { currentImg = photos.length; } } // Check which container we need to use 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; // Make sure the new container is always on the background currentZindex--; // Set the background image of the new active container //alert("../images/" + photoObject.image); $("#headerimg" + activeContainer).fadeIn().css({ "background-image" : "url(upload/fond/" + photoObject.image + ")", "display" : "block", "z-index" : currentZindex }); // Hide the header text $("#headertxt").css({"display" : "none"}); // Set the new header text $("#firstline").html(photoObject.firstline); $("#secondline") .attr("href", photoObject.url) .html(photoObject.secondline); $("#pictureduri") .attr("href", photoObject.url) .html(photoObject.title); // Fade out the current container // and display the header text when animation is complete $("#headerimg" + currentContainer).fadeOut(function() { setTimeout(function() { $("#headertxt").css({"display" : "block"}); animating = false; }, 500); }); }; var stopAnimation = function() { // Change the background image to "play" $("#control").css({ "background-image" : "url(images/btn_play.png)" }); // Clear the interval clearInterval(interval); }; // We should statically set the first image navigate("next"); // Start playing the animation interval = setInterval(function() { navigate("next"); }, slideshowSpeed); });