I want to put a slieshow on my website but i cant change the photos are already on. Is there a way to change them without having a link to them? Thank you in advance

/*
* 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/1362733 ",
	"firstline" : "Going on",
	"secondline" : "vacation?"
}, {
	"title" : "Office Appartments",
	"image" : "work.jpg",
	"url" : "http://www.sxc.hu/photo/1265695",
	"firstline" : "Or still busy at",
	"secondline" : "work?"
}, {
	"title" : "Mountainbiking",
	"image" : "biking.jpg",
	"url" : "http://www.sxc.hu/photo/1221065",
	"firstline" : "Get out and be",
	"secondline" : "active"
}, {
	"title" : "Mountains Landscape",
	"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).fadeOut(function() {
		setTimeout(function() {
			$("#headertxt").css({"display" : "block"});
			animating = false;
		}, 500);
	});
};

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

});

Edited August 31, 201115 yr by ivonna.d

Hi

 

Change "image" to "your-image.jpg"

Change "url" to the "location of your-image.jpg" (i.e. /your-image.jpg)           

 

    "title" : "Stairs",

                "image" : "vacation.jpg",

                "url" : "http://www.sxc.hu/photo/1362733 ",

                "firstline" : "Going on",

                "secondline" : "vacation?"

 

That should work hopefully and it should show the pictures that you want rather than pointing you to the sxc website.

Thank you Oliver but it still not working. I tried that over and over but nothing .

Any other ideas?

Thank you Oliver but it still not working. I tried that over and over but nothing .

Any other ideas?

 

You must be doing something wrong. You need to have the images uploaded to your server and just replace the relevant info correctly as stated above.

 

HTH