directorySlider/demo.html at master · mauromelis/directorySlider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- Most of explanations in this file is from http://en.gravatar.com/whitishmink.
     The file was originally taken from http://www.bensloboda.com/DirectorySliderTest.html-->

<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- This is where to put the location of the jquery library you intend to use-->
<script src="./directorySlider.js"></script><!-- This is where the directorySlider javascript file is-->
</head>
<body>
<div class="directorySlider"></div><!-- Have to use this class name -->
<!-- For this to work, the files need to be labeled with numbers (slideNumber1.png, slideNumber2.png, etc); I have successfully used numbers and letters (tn_1a.jpg, tn_2b.jpg, etc);  however, you can't use the same numbers (NOT tn_1a.jpg, tn_1b.jpg) -->
<script>
$(document).ready(function(){
	$('.directorySlider').directorySlider({ //Use the class name from your <div>
		animation: 'fade', //Or 'uncover', shows the transition between each image.  Fade will fade out the one on top, Uncover will slide the one on top to the left
		filebase: 'slideNumber', //String which prepends the slides you wish to display
		directory: './imageFolder/', //Location of the slides.  Make sure you include the extra forward slash (/) at the end, otherwise it won't work
		extension: 'png', //File extension (can use any image format)
		numslides: 4, //This is the number of slides that will be displayed.
		//This is the number of slides the jQuery will look for, starting at the highest number and counting down by one each time
		//Also, having a numslides of 9, a total of nine slides, but the numbers going from 7-15 will result in less-than-positive results: there will be a broken image link for 15, 14, 13, 12, 11, and 10, then it will display 9, 8, and 7 then it will quickly loop broken images from six to zero
		speed: 300, //This is the time it takes to fade from one image to the next (in milliseconds [1 second = 1000])
		timeout: 900, //This is the time each image displays for before changing into the next image (in milliseconds [1 second = 1000])
		height: 250, //This is the height of the element, so it can fit in with other HTML elements
		width: 1000 //This is the width of the element, so it can fit in with other HTML elements
	});
});
</script>
</body>
</html>