https://kimishin.jp/wp-content/themes/kimishin/js/script.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		"image" : "/wp-content/themes/kimishin/image/top/mainv/main01.jpg",
12		"url" : "http://www.sxc.hu/photo/1271909",
13		"firstline" : "Going on",
14		"secondline" : "vacation?"
15	}, {
16		"title" : "Office Appartments",
17		"image" : "/wp-content/themes/kimishin/image/top/mainv/main02.jpg",
18		"url" : "http://www.sxc.hu/photo/1265695",
19		"firstline" : "Or still busy at",
20		"secondline" : "work?"
21	}, {
22		"title" : "Mountainbiking",
23		"image" : "/wp-content/themes/kimishin/image/top/mainv/main03.jpg",
24		"url" : "http://www.sxc.hu/photo/1221065",
25		"firstline" : "Get out and be",
26		"secondline" : "active"
27	}
28];
29
30
31
32$(document).ready(function() {
33		
34	// Backwards navigation
35	$("#back").click(function() {
36		stopAnimation();
37		navigate("back");
38	});
39	
40	// Forward navigation
41	$("#next").click(function() {
42		stopAnimation();
43		navigate("next");
44	});
45	
46	var interval;
47	$("#control").toggle(function(){
48		stopAnimation();
49	}, function() {
50		// Change the background image to "pause"
51		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
52		
53		// Show the next image
54		navigate("next");
55		
56		// Start playing the animation
57		interval = setInterval(function() {
58			navigate("next");
59		}, slideshowSpeed);
60	});
61	
62	
63	var activeContainer = 1;	
64	var currentImg = 0;
65	var animating = false;
66	var navigate = function(direction) {
67		// Check if no animation is running. If it is, prevent the action
68		if(animating) {
69			return;
70		}
71		
72		// Check which current image we need to show
73		if(direction == "next") {
74			currentImg++;
75			if(currentImg == photos.length + 1) {
76				currentImg = 1;
77			}
78		} else {
79			currentImg--;
80			if(currentImg == 0) {
81				currentImg = photos.length;
82			}
83		}
84		
85		// Check which container we need to use
86		var currentContainer = activeContainer;
87		if(activeContainer == 1) {
88			activeContainer = 2;
89		} else {
90			activeContainer = 1;
91		}
92		
93		showImage(photos[currentImg - 1], currentContainer, activeContainer);
94		
95	};
96	
97	var currentZindex = -1;
98	var showImage = function(photoObject, currentContainer, activeContainer) {
99		animating = true;
100		
101		// Make sure the new container is always on the background
102		currentZindex--;
103		
104		// Set the background image of the new active container
105		$("#headerimg" + activeContainer).css({
106			"background-image" : "url(" + photoObject.image + ")",
107			"display" : "block",
108			"z-index" : currentZindex
109		});
110		
111		// Hide the header text
112		$("#headertxt").css({"display" : "none"});
113		
114		// Set the new header text
115		$("#firstline").html(photoObject.firstline);
116		$("#secondline")
117			.attr("href", photoObject.url)
118			.html(photoObject.secondline);
119		$("#pictureduri")
120			.attr("href", photoObject.url)
121			.html(photoObject.title);
122		
123		
124		// Fade out the current container
125		// and display the header text when animation is complete
126		$("#headerimg" + currentContainer).fadeOut(function() {
127			setTimeout(function() {
128				$("#headertxt").css({"display" : "block"});
129				animating = false;
130			}, 500);
131		});
132	};
133	
134	var stopAnimation = function() {
135		// Change the background image to "play"
136		$("#control").css({ "background-image" : "url(images/btn_play.png)" });
137		
138		// Clear the interval
139		clearInterval(interval);
140	};
141	
142	// We should statically set the first image
143	navigate("next");
144	
145	// Start playing the animation
146	interval = setInterval(function() {
147		navigate("next");
148	}, slideshowSpeed);
149	
150});