/
demo.html
87 lines (83 loc) · 3.53 KB
/
demo.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
<html>
<head>
<title>jQuery-UI sliding plugin</title>
<link rel="stylesheet" href="jquery-ui-1.8.11.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.sliding.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2.js"></script>
<script src="jquery.sliding.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//mode horizontal
var slidingHorizontal = $('.sliding-horizontal');
slidingHorizontal.sliding({
mode: 'horizontal',
items: 3,
target: '.ui-sliding-navigation',
pager: '.pager'
});
slidingHorizontal.sliding('restart');
//mode horizontal with ajax
var slideHorizontalAjax = $('.sliding-horizontal-ajax');
slideHorizontalAjax.sliding({
mode: 'horizontal',
items: 3,
url: 'json.php',
target: '.ui-sliding-ajax-navigation',
before: function() {
$(this).append('<div class="loading">loading</div>');
},
nextRemote: function() {
$(this).find('.loading').remove();
}
});
slideHorizontalAjax.sliding('restart');
slideHorizontalAjax.sliding('setTotalPages', 5);
slideHorizontalAjax.sliding('refresh');
$('.destroy').bind('click', function(){
$('.sliding-horizontal').sliding('destroy');
return false;
});
});
</script>
</head>
<body>
<div id="change-theme">
<a href="javascript:(function(){if%20(!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert('Sorry,%20due%20to%20security%20restrictions,%20this%20tool%20only%20works%20in%20Firefox');%20return%20false;%20};%20if(window.jquitr){%20jquitr.addThemeRoller();%20}%20else{%20jquitr%20=%20{};%20jquitr.s%20=%20document.createElement('script');%20jquitr.s.src%20=%20'http://jqueryui.com/themeroller/developertool/developertool.js.php';%20document.getElementsByTagName('head')[0].appendChild(jquitr.s);}%20})();">Change theme</a>
</div>
<h1><a href="https://github.com/alexanmtz/sliding" title="go to project">jQuery ui sliding</a></h1>
<div id="main">
<div class="demo horizontal-demo">
<h2>Simple sliding horizontal</h2>
<div class="sliding-horizontal">
<ul>
<li><img src="thumbs/image01.jpg" /></li>
<li><img src="thumbs/image02.jpg" /></li>
<li><img src="thumbs/image03.jpg" /></li>
<li><img src="thumbs/image04.jpg" /></li>
<li><img src="thumbs/image05.jpg" /></li>
<li><img src="thumbs/image06.jpg" /></li>
<li><img src="thumbs/image02.jpg" /></li>
</ul>
</div>
<div class="ui-sliding-navigation"></div>
<div class="pager"></div>
<a href="#" class="destroy">destroy!</a>
</div>
<div class="demo horizontal-demo">
<h2>Simple sliding horizontal with ajax</h2>
<div class="sliding-horizontal-ajax">
<ul>
<li><img src="thumbs/image01.jpg" /></li>
<li><img src="thumbs/image02.jpg" /></li>
<li><img src="thumbs/image03.jpg" /></li>
</ul>
</div>
<div class="ui-sliding-ajax-navigation"></div>
</div>
</div>
</body>
</html>