Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Jquery Slide Image (Adding feature to existing code)

Posted on 2011-03-06
8
Medium Priority
?
804 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:VAN_AL
  • 4
  • 4
8 Comments
 
LVL 1

Author Comment

by:VAN_AL
ID: 35047582
Assistance needed please!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35053742
Ok, I am looking. Funnily enough if you scroll up in the comments at marcfolio, you will see my name ;)
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35053826
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 35053997
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
 
LVL 1

Author Comment

by:VAN_AL
ID: 35053999
Yes, yes thank you!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35054007
Amazing stuff, this jQuery :)
0
 
LVL 1

Author Comment

by:VAN_AL
ID: 35054031
jQuery yes, but it's useless if you can't use it and you made it possible, thank you again!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35054177
With speed:

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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question