title: Changing JS code to make Images Slide
body: <p>I need help implementing a slide function to my slideshow, I've got most of it done, started off from a tutorial and with lots of browsing on the jquery website, but now I'm stuck and need help.</p>
  
  <p>I want to achieve two things, one is to get the images to slide from right to left, but the first image must not slide in, it stays put but all other images slide.</p>
  
  <p>And I have a caption at the bottom, i've got it figured out how to show and hide the text but not the colored div, basically my goal was to have a caption/footer show up with a link in on the last slide, which would stay a little longer on that particular slide but if it's doesn't that's fine as the first two requests are the most important to me.</p>
  
  <ul>
  <li><strong>JS Fiddle Link:</strong>
  <a href="http://jsfiddle.net/8bBYu/" rel="nofollow">http://jsfiddle.net/8bBYu/</a></li>
  </ul>
  
  <p>Thank you in advance, below is the javascript code.</p>
  
  <pre><code>/*
   * Author:      Marco Kuiper (http://www.marcofolio.net/)
   */
  
  // Speed of the automatic slideshow
  var 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);
  
  });
  </code></pre>