Solved

Jquery Slide Image (Adding feature to existing code)

Posted on 2011-03-06
8
783 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…

808 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