-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·114 lines (93 loc) · 3.52 KB
/
index.html
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NiceFade with jQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nicefade.min.js"></script>
<script type="text/javascript">
var nicefade;
function before() {
var index = nicefade.target_slide().index() + 1;
if ( index )
$('#target_slide').text( index );
else
$('#target_slide').text( 'not defined' );
}
function after() {
$('#animation_status').text( (nicefade.is_active() ? 'active' : 'inactive') );
$('#current_slide').text(nicefade.current_slide().index() + 1);
$('#slideshow_length').text(nicefade.slideshow_length());
}
$(function(){
nicefade = $('#nicefade_wrapper .nicefade_container').nicefade({
animationDelay: 4000,
afterSlideChange: after,
beforeSlideChange: before
});
$('#previous_slide').click(function(e){
e.preventDefault();
nicefade.previous();
});
$('#next_slide').click(function(e){
e.preventDefault();
nicefade.next();
});
$('#seek_slide').click(function(e){
e.preventDefault();
nicefade.seek($('#seek_target_slide').val());
});
$('#stop_slideshow').click(function(e){
e.preventDefault();
nicefade.stop();
before();
after();
});
before();
after();
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Nicefade — a jQuery slideshow plugin.</h1>
<p>Why is there a need for yet another jQuery slideshow plugin when there are already so many good ones out there? Well, this one
isn't quite like the others. The problem with most automated JavaScript animation plugins is that they have a nasty tendency
to queue animations. This is evident when you leave the browser tab or window
and come back to a string of animations happening all at once. This plugin addresses that issue by not queuing up animations
at all. Try it out for yourself, and <a href="https://github.com/ridgehkr/nicefade">contribute on GitHub</a>!</p>
<ul>
<li><a href="README.md">Docs</a></li>
<li><a href="LICENSE.txt">License</a></li>
</ul>
<hr>
<div id="nicefade_wrapper">
<ul class="nicefade_container clear">
<li>First Slide</li>
<li>Second Slide</li>
<li>Third Slide</li>
<li>Fourth Slide</li>
<li>Fifth Slide</li>
</ul>
<ul class="nicefade_index-list clear">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div> <!-- .nicefade_wrapper -->
<p class="clear">Status: automated animation is currently <span id="animation_status"></span>.</p>
<p class="clear buttons"><button id="previous_slide">Previous Slide</button> <button id="next_slide">Next Slide</button></p>
<p class="clear buttons"><button id="seek_slide">Seek Slide:</button> <input type="text" value="1" id="seek_target_slide" size="3"></p>
<p class="clear buttons"><button id="stop_slideshow">Stop Slideshow</button></p>
<p>
Current slide: <span id="current_slide"></span><br>
Target slide: <span id="target_slide">not defined</span><br>
Slideshow length: <span id="slideshow_length"></span>
</p>
</div> <!-- #page-wrap -->
</body>
</html>