Jquery Slide Image (Adding feature to existing code)

Hi All,

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.

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.

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.

Thank you in advance, below is the javascript code and i've included separate files as well. can't include a zip EE doesn't allow me to add .zip files something about unsupported extensions.
/*
* 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);
	
});

Open in new window

index.html
script.js
style.css
LVL 1
VAN_ALAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
I have tried this - let me know if that is what you need

    $("#headerimg" + currentContainer).animate({width: 'toggle'},function() {
                  setTimeout(function() {
                        $("#headertxt").css({"display" : "block"});
                        animating = false;
                  }, 2000);
            });
0
 
VAN_ALAuthor Commented:
Assistance needed please!
0
 
Michel PlungjanIT ExpertCommented:
Ok, I am looking. Funnily enough if you scroll up in the comments at marcfolio, you will see my name ;)
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
VAN_ALAuthor Commented:
Really? What are the chances we find the same gallery slider, the animation? It's the background images that animate or slide, but i can only get toggle, slideup and slidedown to work, I would like to have slide from right to left work for this and have the captions bar in the bottom show and hide as does the text within in, if you exccute the files you will see what I mean.

I've tried to do some changes for the animation here:

// 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);
		});
	};
	

Open in new window

0
 
VAN_ALAuthor Commented:
Yes, yes thank you!
0
 
Michel PlungjanIT ExpertCommented:
Amazing stuff, this jQuery :)
0
 
VAN_ALAuthor Commented:
jQuery yes, but it's useless if you can't use it and you made it possible, thank you again!
0
 
Michel PlungjanIT ExpertCommented:
With speed:

    $("#headerimg" + currentContainer).animate({width: 'toggle'},2000,function() {
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.