I want to have a slide up bar appear on my last slide which also revels a text link when it slides up and stay there, and it would stay visable for like 8 seconds then slide back down and hide.
Currently I'm using this code to achieve it, but also I am trying to control the timing of another selector, text, but on one server it works, but on another, i had to modify the values of the 'setTimeout' function, but still can't get it to work properly, are these settimeout values eq 6500 normal to have?
Here is the snippet of code from the attached code, this is where the animation happens and where my issue is:
/** Author: Marco Kuiper (http://www.marcofolio.net/)*/// Speed of the automatic slideshowvar slideshowSpeed = 6000;// Variable to store the images we need to set as background// which also includes some text and url's.var photos = [ { "title" : "Stairs", "image" : "vacation.jpg", "url" : "http://www.sxc.hu/photo/1271909", "firstline" : "Dubstep is a genre of electronic dance music", "secondline" : "" }, { "title" : "Office Appartments", "image" : "work.jpg", "url" : "http://www.sxc.hu/photo/1265695", "firstline" : "Or still busy at", "secondline" : "work?" }, { "title" : "", "image" : "biking.jpg", "url" : "http://www.sxc.hu/photo/1221065", "firstline" : "Get out and be", "secondline" : "active" }, { "title" : "", "image" : "nature.jpg", "url" : "http://www.sxc.hu/photo/1271915", "firstline" : "Take a fresh breath of", "secondline" : "nature" }, { "title" : "Italian pizza", "image" : "food.jpg", "url" : "http://www.sxc.hu/photo/1042413", "firstline" : "Enjoy some delicious", "secondline" : "food" }];$(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 $("#headerimg" + activeContainer).css({ "background-image" : "url(images/" + 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) .toggle('slow', function() { setTimeout(function() { $("#headertxt").css({"display" : "block"}); animating = false; }, 2000); }); }; 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);});
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!