Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 188 lines (148 sloc) 13.187 kB
e90c670 @luis-almeida First pages commit
authored
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
7 <title>jQuery animation</title>
8 <meta name="description" content="jQuery fallback animation">
c24a7a4 @luis-almeida minor changes in the project page
authored
9 <meta name="keywords" content="jquery, pagination, javascript, plugin" />
e90c670 @luis-almeida First pages commit
authored
10 <meta name="author" content="Luís Almeida">
11
12 <meta name="viewport" content="width=device-width,initial-scale=1">
13
14 <link rel="stylesheet" href="css/style.css">
15 <link rel="stylesheet" href="css/jPages.css">
16 <link rel="stylesheet" href="css/animate.css">
17 <link rel="stylesheet" href="css/github.css">
18
19 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
20 <script type="text/javascript" src="js/highlight.pack.js"></script>
21 <script type="text/javascript" src="js/tabifier.js"></script>
22 <script src="js/js.js"></script>
23 <script src="js/jPages.js"></script>
b7733b5 @luis-almeida minor changes to the project website
authored
24
25 <script type="text/javascript">
26
27 var _gaq = _gaq || [];
28 _gaq.push(['_setAccount', 'UA-28718218-1']);
29 _gaq.push(['_trackPageview']);
30
31 (function() {
32 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
33 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
34 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
35 })();
36
37 </script>
e90c670 @luis-almeida First pages commit
authored
38
39 <script>
40 /* when document is ready */
41 $(function(){
42
43 /* iniciate jPages without setting any css animation
44 * and setting the fallback fadeIn speed to 500
45 */
46 $("div.holder").jPages({
47 containerID : "itemContainer",
48 fallback : 500
49 });
50
51 /* on select change */
52 $("select").change(function(){
53 /* get new fadeIn speed */
54 var newFallbackSpeed = parseInt( $(this).val() );
55
56 /* destroy jPages and initiate plugin again */
57 $("div.holder").jPages("destroy").jPages({
58 containerID : "itemContainer",
59 animation : false,
60 fallback : newFallbackSpeed
61 });
62 });
63
64 });
65 </script>
66
67 <style type="text/css">
68 .holder {
69 margin: 15px 0;
70 }
71
72 .holder a {
73 font-size: 12px;
74 cursor: pointer;
75 margin: 0 5px;
76 color: #333;
77 }
78
79 .holder a:hover {
80 background-color: #222;
81 color: #fff;
82 }
83
84 .holder a.jp-previous { margin-right: 15px; }
85 .holder a.jp-next { margin-left: 15px; }
86
87 .holder a.jp-current, a.jp-current:hover {
88 color: #FF4242;
89 font-weight: bold;
90 }
91
92 .holder a.jp-disabled, a.jp-disabled:hover {
93 color: #bbb;
94 }
95
96 .holder a.jp-current, a.jp-current:hover,
97 .holder a.jp-disabled, a.jp-disabled:hover {
98 cursor: default;
99 background: none;
100 }
101
102 .holder span { margin: 0 5px; }
103 </style>
104
105 </head>
106 <body>
107
36943c2 @luis-almeida v0.4
authored
108 <div id="filtrify">by the same author of <a href="http://luis-almeida.github.com/filtrify/">filtrify</a></div>
109
e90c670 @luis-almeida First pages commit
authored
110 <div id="container" class="clearfix">
111
112 <div id="sidebar">
c30ab80 @luis-almeida minor changes in the project page
authored
113 <h1 id="header">jPages</h1>
114 <ul id="menu">
115 <li><a href="http://luis-almeida.github.com/jPages/">Info</a></li>
116 <li><a href="documentation.html">documentation</a></li>
e90c670 @luis-almeida First pages commit
authored
117 <li><a href="theauthor.html">the author</a></li>
118 <li><a href="download.html">download</a></li>
119 </ul>
120
121 <h2>Examples</h2>
122 <ul>
123 <li><a href="defaults.html">defaults</a></li>
124 <li><a href="pagination.html">pagination</a></li>
125 <li><a href="itemsperpage.html">items per page</a></li>
126 <li><a href="customizebuttons.html">customize buttons</a></li>
127 <li><a href="custombuttons.html">custom buttons</a></li>
128 <li><a href="blanklinks.html">blank links</a></li>
129 <li><a href="titlelinks.html">title links</a></li>
130 <li><a href="keybrowse.html">key browse</a></li>
131 <li><a href="scrollbrowse.html">scroll browse</a></li>
132 <li><a href="auto.html">auto</a></li>
133 <li><a href="direction.html">direction</a></li>
134 <li><a href="cssanimation.html">css animation</a></li>
76b984b @luis-almeida IE bug fixes
authored
135 <li class="selected"><a href="jqueryanimation.html">jQuery animation</a></li>
e90c670 @luis-almeida First pages commit
authored
136 <li><a href="callback.html">callback</a></li>
137 <li><a href="jumptopage.html">jump to page</a></li>
138 <li><a href="destroy.html">destroy</a></li>
139 <li><a href="lazyload.html">lazy load</a></li>
140 </ul>
141
142 <h2>Demos</h2>
143 <ul>
144 <li><a href="mosaic.html">mosaic</a></li>
145 <li><a href="gallery.html">gallery</a></li>
146 <li><a href="table.html">table</a></li>
147 </ul>
cd4bd40 @luis-almeida project page now has a twitter button
authored
148
149 <div class="share">
150 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://luis-almeida.github.com/jPages/" data-text="jPages" data-via="lmgalmeida" data-hashtags="jQuery">Tweet</a>
151 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
152 </div>
153
e90c670 @luis-almeida First pages commit
authored
154 </div> <!--! end of #sidebar -->
155
156 <div id="content">
157
158 <h2>Fallback jQuery Animation</h2>
159
160 <p>If you don't set a CSS3 animation or if the browser doesn't support CSS3 animations, jPages will fallback to the jQuery fadeIn effect.</p>
161 <p>You can costumize the fallback fadeIn speed in the parameter "fallback". You can use miliseconds or the strings 'fast', 'slow' and 'normal'.</p>
162
163
164 <!-- navigation holder -->
165 <div class="holder"></div>
166
167 <!-- item container -->
168 <ul id="itemContainer">
169 <li><img src="img/img (1).jpg" alt="image"></li><li><img src="img/img (2).jpg" alt="image"></li><li><img src="img/img (3).jpg" alt="image"></li><li><img src="img/img (4).jpg" alt="image"></li><li><img src="img/img (5).jpg" alt="image"></li><li><img src="img/img (6).jpg" alt="image"></li><li><img src="img/img (7).jpg" alt="image"></li><li><img src="img/img (8).jpg" alt="image"></li><li><img src="img/img (9).jpg" alt="image"></li><li><img src="img/img (10).jpg" alt="image"></li><li><img src="img/img (11).jpg" alt="image"></li><li><img src="img/img (12).jpg" alt="image"></li><li><img src="img/img (13).jpg" alt="image"></li><li><img src="img/img (14).jpg" alt="image"></li><li><img src="img/img (15).jpg" alt="image"></li><li><img src="img/img (16).jpg" alt="image"></li><li><img src="img/img (17).jpg" alt="image"></li><li><img src="img/img (18).jpg" alt="image"></li><li><img src="img/img (19).jpg" alt="image"></li><li><img src="img/img (20).jpg" alt="image"></li><li><img src="img/img (21).jpg" alt="image"></li><li><img src="img/img (22).jpg" alt="image"></li><li><img src="img/img (23).jpg" alt="image"></li><li><img src="img/img (24).jpg" alt="image"></li><li><img src="img/img (25).jpg" alt="image"></li><li><img src="img/img (26).jpg" alt="image"></li><li><img src="img/img (27).jpg" alt="image"></li><li><img src="img/img (28).jpg" alt="image"></li><li><img src="img/img (29).jpg" alt="image"></li><li><img src="img/img (30).jpg" alt="image"></li><li><img src="img/img (31).jpg" alt="image"></li><li><img src="img/img (32).jpg" alt="image"></li><li><img src="img/img (33).jpg" alt="image"></li><li><img src="img/img (34).jpg" alt="image"></li><li><img src="img/img (35).jpg" alt="image"></li><li><img src="img/img (36).jpg" alt="image"></li><li><img src="img/img (37).jpg" alt="image"></li><li><img src="img/img (38).jpg" alt="image"></li><li><img src="img/img (39).jpg" alt="image"></li><li><img src="img/img (40).jpg" alt="image"></li><li><img src="img/img (41).jpg" alt="image"></li><li><img src="img/img (42).jpg" alt="image"></li><li><img src="img/img (43).jpg" alt="image"></li><li><img src="img/img (44).jpg" alt="image"></li><li><img src="img/img (45).jpg" alt="image"></li><li><img src="img/img (46).jpg" alt="image"></li><li><img src="img/img (47).jpg" alt="image"></li><li><img src="img/img (48).jpg" alt="image"></li><li><img src="img/img (49).jpg" alt="image"></li><li><img src="img/img (50).jpg" alt="image"></li><li><img src="img/img (51).jpg" alt="image"></li><li><img src="img/img (52).jpg" alt="image"></li><li><img src="img/img (53).jpg" alt="image"></li><li><img src="img/img (54).jpg" alt="image"></li><li><img src="img/img (55).jpg" alt="image"></li><li><img src="img/img (56).jpg" alt="image"></li><li><img src="img/img (57).jpg" alt="image"></li><li><img src="img/img (58).jpg" alt="image"></li><li><img src="img/img (59).jpg" alt="image"></li><li><img src="img/img (60).jpg" alt="image"></li><li><img src="img/img (61).jpg" alt="image"></li><li><img src="img/img (62).jpg" alt="image"></li><li><img src="img/img (63).jpg" alt="image"></li><li><img src="img/img (64).jpg" alt="image"></li><li><img src="img/img (65).jpg" alt="image"></li><li><img src="img/img (66).jpg" alt="image"></li><li><img src="img/img (67).jpg" alt="image"></li><li><img src="img/img (68).jpg" alt="image"></li><li><img src="img/img (69).jpg" alt="image"></li><li><img src="img/img (70).jpg" alt="image"></li><li><img src="img/img (71).jpg" alt="image"></li><li><img src="img/img (72).jpg" alt="image"></li><li><img src="img/img (73).jpg" alt="image"></li><li><img src="img/img (74).jpg" alt="image"></li><li><img src="img/img (75).jpg" alt="image"></li><li><img src="img/img (76).jpg" alt="image"></li><li><img src="img/img (77).jpg" alt="image"></li><li><img src="img/img (78).jpg" alt="image"></li><li><img src="img/img (79).jpg" alt="image"></li><li><img src="img/img (80).jpg" alt="image"></li><li><img src="img/img (81).jpg" alt="image"></li><li><img src="img/img (82).jpg" alt="image"></li><li><img src="img/img (83).jpg" alt="image"></li><li><img src="img/img (84).jpg" alt="image"></li><li><img src="img/img (85).jpg" alt="image"></li><li><img src="img/img (86).jpg" alt="image"></li><li><img src="img/img (87).jpg" alt="image"></li><li><img src="img/img (88).jpg" alt="image"></li><li><img src="img/img (89).jpg" alt="image"></li><li><img src="img/img (90).jpg" alt="image"></li><li><img src="img/img (91).jpg" alt="image"></li><li><img src="img/img (92).jpg" alt="image"></li><li><img src="img/img (93).jpg" alt="image"></li><li><img src="img/img (94).jpg" alt="image"></li><li><img src="img/img (95).jpg" alt="image"></li><li><img src="img/img (96).jpg" alt="image"></li><li><img src="img/img (97).jpg" alt="image"></li><li><img src="img/img (98).jpg" alt="image"></li><li><img src="img/img (99).jpg" alt="image"></li><li><img src="img/img (100).jpg" alt="image"></li><li><img src="img/img (101).jpg" alt="image"></li><li><img src="img/img (102).jpg" alt="image"></li><li><img src="img/img (103).jpg" alt="image"></li><li><img src="img/img (104).jpg" alt="image"></li><li><img src="img/img (105).jpg" alt="image"></li><li><img src="img/img (106).jpg" alt="image"></li><li><img src="img/img (107).jpg" alt="image"></li><li><img src="img/img (108).jpg" alt="image"></li><li><img src="img/img (109).jpg" alt="image"></li><li><img src="img/img (110).jpg" alt="image"></li><li><img src="img/img (111).jpg" alt="image"></li><li><img src="img/img (112).jpg" alt="image"></li><li><img src="img/img (113).jpg" alt="image"></li><li><img src="img/img (114).jpg" alt="image"></li><li><img src="img/img (115).jpg" alt="image"></li><li><img src="img/img (116).jpg" alt="image"></li><li><img src="img/img (117).jpg" alt="image"></li><li><img src="img/img (118).jpg" alt="image"></li><li><img src="img/img (119).jpg" alt="image"></li><li><img src="img/img (120).jpg" alt="image"></li><li><img src="img/img (121).jpg" alt="image"></li><li><img src="img/img (122).jpg" alt="image"></li><li><img src="img/img (123).jpg" alt="image"></li><li><img src="img/img (124).jpg" alt="image"></li><li><img src="img/img (125).jpg" alt="image"><li><img src="img/img (126).jpg" alt="image"></li><li><img src="img/img (127).jpg" alt="image"></li><li><img src="img/img (128).jpg" alt="image"></li><li><img src="img/img (129).jpg" alt="image"></li><li><img src="img/img (130).jpg" alt="image"></li><li><img src="img/img (131).jpg" alt="image"></li><li><img src="img/img (132).jpg" alt="image"></li><li><img src="img/img (133).jpg" alt="image"></li><li><img src="img/img (134).jpg" alt="image"></li><li><img src="img/img (135).jpg" alt="image"></li><li><img src="img/img (136).jpg" alt="image"></li><li><img src="img/img (137).jpg" alt="image"></li><li><img src="img/img (138).jpg" alt="image"></li>
170 </ul>
171
172 <select>
173 <option value="200">fast</option>
174 <option value="400">normal</option>
175 <option value="600">slow</option>
176 <option>1000</option>
cacda32 @luis-almeida changes
authored
177 <option>2000</option>
178 <option>3000</option>
e90c670 @luis-almeida First pages commit
authored
179 </select>
180
181 </div> <!--! end of #content -->
182 </div> <!--! end of #container -->
183
af2f5ea @luis-almeida v0.4
authored
184 <a href="http://github.com/luis-almeida"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
36943c2 @luis-almeida v0.4
authored
185
e90c670 @luis-almeida First pages commit
authored
186 </body>
187 </html>
Something went wrong with that request. Please try again.