https://www.accesseducationindia.com/script-hdr.js

1/*
2* Author:      Marco Kuiper (http://www.marcofolio.net/)
3*/
4
5// Speed of the automatic slideshow
6var slideshowSpeed = 6000;
7
8// Variable to store the images we need to set as background
9// which also includes some text and url's.
10var photos = [ {
11		"title" : "",
12		"image" : "s1.jpg",
13		"url" : "",
14		"firstline" : "",
15		"secondline" : "",
16		"thirdline" : ""
17	},{
18		"title" : "",
19		"image" : "s2.jpg",
20		"url" : "",
21		"firstline" : "",
22		"secondline" : "",
23		"thirdline" : ""
24	
25	},{
26		"title" : "",
27		"image" : "s3.jpg",
28		"url" : "",
29		"firstline" : "",
30		"secondline" : "",
31		"thirdline" : ""
32	
33	},
34];
35
36
37
38$(document).ready(function() {
39		
40	// Backwards navigation
41	$("#back").click(function() {
42		stopAnimation();
43		navigate("back");
44	});
45	
46	// Forward navigation
47	$("#next").click(function() {
48		stopAnimation();
49		navigate("next");
50	});
51	
52	var interval;
53	$("#control").toggle(function(){
54		stopAnimation();
55	}, function() {
56		// Change the background image to "pause"
57		$(this).css({ "background-image" : "url(gifs/btn_pause.png)" });
58		
59		// Show the next image
60		navigate("next");
61		
62		// Start playing the animation
63		interval = setInterval(function() {
64			navigate("next");
65		}, slideshowSpeed);
66	});
67	
68	
69	var activeContainer = 1;	
70	var currentImg = 0;
71	var animating = false;
72	var navigate = function(direction) {
73		// Check if no animation is running. If it is, prevent the action
74		if(animating) {
75			return;
76		}
77		
78		// Check which current image we need to show
79		if(direction == "next") {
80			currentImg++;
81			if(currentImg == photos.length + 1) {
82				currentImg = 1;
83			}
84		} else {
85			currentImg--;
86			if(currentImg == 0) {
87				currentImg = photos.length;
88			}
89		}
90		
91		// Check which container we need to use
92		var currentContainer = activeContainer;
93		if(activeContainer == 1) {
94			activeContainer = 2;
95		} else {
96			activeContainer = 1;
97		}
98		
99		showImage(photos[currentImg - 1], currentContainer, activeContainer);
100		
101	};
102	
103	var currentZindex = -1;
104	var showImage = function(photoObject, currentContainer, activeContainer) {
105		animating = true;
106		
107		// Make sure the new container is always on the background
108		currentZindex--;
109		
110		// Set the background image of the new active container
111		$("#headerimg" + activeContainer).css({
112			"background-image" : "url(gifs/" + photoObject.image + ")",
113			"display" : "block",
114			"z-index" : currentZindex
115		});
116		
117		// Hide the header text
118		$("#headertxt").css({"display" : "none"});
119		
120		// Set the new header text
121		$("#firstline").html(photoObject.firstline);
122		$("#secondline").html(photoObject.secondline);
123		$("#thirdline")
124			.attr("href", photoObject.url)
125			.html(photoObject.thirdline);
126		$("#pictureduri")
127			.attr("href", photoObject.url)
128			.html(photoObject.title);
129		
130		
131		// Fade out the current container
132		// and display the header text when animation is complete
133		$("#headerimg" + currentContainer).fadeOut(function() {
134			setTimeout(function() {
135				$("#headertxt").css({"display" : "block"});
136				animating = false;
137			}, 500);
138		});
139	};
140	
141	var stopAnimation = function() {
142		// Change the background image to "play"
143		$("#control").css({ "background-image" : "url(gifs/btn_play.png)" });
144		
145		// Clear the interval
146		clearInterval(interval);
147	};
148	
149	// We should statically set the first image
150	navigate("next");
151	
152	// Start playing the animation
153	interval = setInterval(function() {
154		navigate("next");
155	}, slideshowSpeed);
156	
157});