-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathexample.html
112 lines (104 loc) · 5.18 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>jQuery Monte Demo</title>
<style>
body { margin:auto; width:850px; padding:0 0 20px 0; font-family:verdana, sans-serif; font-size:12px; }
h3 { margin-top:50px; }
.container { width:850px; height:360px; }
.container > img, .container > div { width:480px; height:360px; display:none; }
#example1 .montePrev, #example1 .monteNext, #example1 .montePlay {
display:block;
background-image:url(buttons.png);
background-repeat:none;
position:absolute;
text-indent:-9999px;
}
#example1 .montePrev { width:29px; height:28px; background-position:0 -46px; bottom:-14px; left:376px }
#example1 .montePrev:hover { background-position:0 -6px; }
#example1 .monteNext { width:29px; height:28px; background-position:-70px -46px; bottom:-14px; left:446px;}
#example1 .monteNext:hover { background-position:-70px -6px; }
#example1 .montePlay { width:41px; height:40px; background-position:-29px -120px; bottom:-20px; left:405px; }
#example1 .montePlay:hover { background-position:-29px -80px; }
#example1 .montePaused { background-position:-29px -40px; }
#example1 .montePaused:hover { background-position:-29px 0px; }
#example3 img { width:100%; height:100%; }
#example3 div div { position:absolute; bottom:0; left:0; background:#fff; width:100%; }
#example3 p { margin:0; color:#000; padding:5px 15px 24px 15px; }
#example3 .frame { position:absolute; top:0; left:0; }
#example3 .montePlay { display:none; }
#example3 .montePrev, #example3 .monteNext {
display:block;
background-image:url(arrows.png);
background-repeat:none;
position:absolute;
top:166px;
width:24px;
height:28px;
text-indent:-9999px;
}
#example3 .montePrev { left:0; background-position:bottom left; }
#example3 .monteNext { right:0; background-position:bottom right; }
#example3 .montePrev:hover { background-position:top left; }
#example3 .monteNext:hover { background-position:top right; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="jquery.monte.js"></script>
<script>
$(function () {
// Unstyled Example
$.monte('#example1');
// Styled Buttons Example
// (see the CSS in the above style block)
$.monte('#example2', {auto:false});
// Callback Example
// Format and append the HTML:
$('#example3 > img').each(function(){
$(this)
.wrap('<div style="position:relative"/>')
.parent()
.append('<div><p>' + $(this).attr('alt') + '</p></div>')
.append('<img src="frame.png" alt="" class="frame"/>');
});
// Hide the text on all but the center slide:
$('#example3 div div').css({opacity: 0}).eq(0).css({opacity: 0.8});
// Using the callbacks to reveal and hide the text:
$.monte('#example3', {
auto:false,
callbackIn: function () {
$(this[0]).find('div').animate({opacity: 0.8}, 450);
},
callbackAway: function () {
$(this[0]).find('div').animate({opacity: 0}, 450);
}
});
});
</script>
</head>
<body>
<div id='example1' class='container'>
<img src='turtle1.jpg' alt='An eastern mud turtle hatching.'/>
<img src='turtle2.jpg' alt='Just hatched.'/>
<img src='turtle3.jpg' alt='After three months.'/>
<img src='turtle4.jpg' alt='Taking an occassional bask.'/>
<img src='turtle5.jpg' alt='Ornery but healthy at two and a half years.'/>
</div>
<h3>Unstyled</h3>
<div id='example2' class='container'>
<img src='turtle1.jpg' alt='An eastern mud turtle hatching.'/>
<img src='turtle2.jpg' alt='Just hatched.'/>
<img src='turtle3.jpg' alt='After three months.'/>
<img src='turtle4.jpg' alt='Taking an occassional bask.'/>
<img src='turtle5.jpg' alt='Ornery but healthy at two and a half years.'/>
</div>
<h3>HTML with callbacks</h3>
<div id='example3' class='container'>
<img src='turtle1.jpg' alt='An eastern mud turtle hatching.'/>
<img src='turtle2.jpg' alt='Just hatched.'/>
<img src='turtle3.jpg' alt='After three months.'/>
<img src='turtle4.jpg' alt='Taking an occassional bask.'/>
<img src='turtle5.jpg' alt='Ornery but healthy at two and a half years.'/>
</div>
</body>
</html>