https://www.socialmotus.com/scripts/script.js

1/*
2* Author:      Marco Kuiper (http://www.marcofolio.net/)
3*/
4var $j = jQuery.noConflict();
5$j(document).ready(function() {
6		
7	// Backwards navigation
8	$j("#back").click(function() {
9		stopAnimation();
10		navigate("back");
11	});
12	
13	// Forward navigation
14	$j("#next_btn").click(function() {
15		stopAnimation();
16		navigate("next_btn");
17	});
18	
19	var interval;
20	$j("#control").toggle(function(){
21		stopAnimation();
22	}, function() {
23		// Change the background image to "pause"
24		$j(this).addClass("selected_pause").removeClass("selected_play");
25		
26		// Show the next_btn image
27		navigate("next_btn");
28		
29		// Start playing the animation
30		interval = setInterval(function() {
31			navigate("next_btn");
32		}, slideshowSpeed);
33	});
34	
35	
36	var activeContainer = 1;	
37	var currentImg = 0;
38	var animating = false;
39	var navigate = function(direction) {
40		// Check if no animation is running. If it is, prevent the action
41		if(animating) {
42			return;
43		}
44		
45		// Check which current image we need to show
46		if(direction == "next_btn") {
47			currentImg++;
48			if(currentImg == photos.length + 1) {
49				currentImg = 1;
50			}
51		} else {
52			currentImg--;
53			if(currentImg == 0) {
54				currentImg = photos.length;
55			}
56		}
57		
58		// Check which container we need to use
59		var currentContainer = activeContainer;
60		if(activeContainer == 1) {
61			activeContainer = 2;
62		} else {
63			activeContainer = 1;
64		}
65		
66		showImage(photos[currentImg - 1], currentContainer, activeContainer);
67		
68	};
69	
70	var currentZindex = -1;
71	var showImage = function(photoObject, currentContainer, activeContainer) {
72		animating = true;
73		
74		// Make sure the new container is always on the background
75		currentZindex--;
76		
77		// Set the background image of the new active container
78		$j("#headerimg" + activeContainer).css({
79			"background-image" : "url(" + photoObject.image + ")",
80			"display" : "block",
81			"z-index" : currentZindex
82		});
83		
84		// Hide the header text
85		$j("#slidetxt").css({opacity: 0,left: '-1000px'});
86		
87		$j("#images_preload")
88			.attr("href", photoObject.image)
89		
90		// Set the new header text
91		$j("#slide").html(photoObject.firstline);
92		$j("#secondline")
93			.html(photoObject.secondline);
94		$j("#pictureduri")
95			.attr("src", photoObject.url)
96			.html(photoObject.title);
97		
98		$j("#firstline, #secondline, #pictureduri").each(function () {
99			if ( $j(this).text() == "") { $j(this).addClass("empty"); } else { $j(this).removeClass("empty"); }
100		})
101		
102		// Fade out the current container
103		// and display the header text when animation is complete
104		$j("#headerimg" + currentContainer).fadeOut(function() {
105			setTimeout(function() {
106				$j("#slidetxt").animate({opacity: 1,left: '0px'}, "1000");
107				animating = false;
108			}, 100);
109		});
110	};
111	
112	var stopAnimation = function() {
113		// Change the background image to "play"
114		$j("#control").addClass("selected_play").removeClass("selected_pause");
115		
116		// Clear the interval
117		clearInterval(interval);
118	};
119	
120	// We should statically set the first image
121	navigate("next_btn");
122	
123	// Start playing the animation
124	interval = setInterval(function() {
125		navigate("next_btn");
126	}, slideshowSpeed);
127	
128});