Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit e90c670
Showing
192 changed files
with
9,085 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
jPages.js | ||
=========== | ||
|
||
|
||
jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load. | ||
Apart from all its features, the main diference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them. | ||
The plugin is very unobtrusive and it won't apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,141 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
|
||
<title>auto</title> | ||
<meta name="description" content="auto page turn"> | ||
<meta name="author" content="Luís Almeida"> | ||
|
||
<meta name="viewport" content="width=device-width,initial-scale=1"> | ||
|
||
<link rel="stylesheet" href="css/style.css"> | ||
<link rel="stylesheet" href="css/jPages.css"> | ||
<link rel="stylesheet" href="css/animate.css"> | ||
<link rel="stylesheet" href="css/github.css"> | ||
|
||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
<script type="text/javascript" src="js/highlight.pack.js"></script> | ||
<script type="text/javascript" src="js/tabifier.js"></script> | ||
<script src="js/js.js"></script> | ||
<script src="js/jPages.js"></script> | ||
|
||
<script> | ||
/* when document is ready */ | ||
$(function(){ | ||
|
||
/* initiate plugin */ | ||
$("div.holder").jPages({ | ||
containerID : "itemContainer", | ||
pause : 4000, | ||
clickStop : true | ||
}); | ||
|
||
}); | ||
</script> | ||
|
||
<style type="text/css"> | ||
.holder { | ||
margin: 15px 0; | ||
} | ||
|
||
.holder a { | ||
font-size: 12px; | ||
cursor: pointer; | ||
margin: 0 5px; | ||
color: #333; | ||
} | ||
|
||
.holder a:hover { | ||
background-color: #222; | ||
color: #fff; | ||
} | ||
|
||
.holder a.jp-previous { margin-right: 15px; } | ||
.holder a.jp-next { margin-left: 15px; } | ||
|
||
.holder a.jp-current, a.jp-current:hover { | ||
color: #FF4242; | ||
font-weight: bold; | ||
} | ||
|
||
.holder a.jp-disabled, a.jp-disabled:hover { | ||
color: #bbb; | ||
} | ||
|
||
.holder a.jp-current, a.jp-current:hover, | ||
.holder a.jp-disabled, a.jp-disabled:hover { | ||
cursor: default; | ||
background: none; | ||
} | ||
|
||
.holder span { margin: 0 5px; } | ||
</style> | ||
|
||
</head> | ||
<body> | ||
|
||
<div id="container" class="clearfix"> | ||
|
||
<div id="sidebar"> | ||
<h1>jPages</h1> | ||
<ul> | ||
<li><a href="documentation.html">documentation</a></li> | ||
<li><a href="theauthor.html">the author</a></li> | ||
<li><a href="download.html">download</a></li> | ||
</ul> | ||
|
||
<h2>Examples</h2> | ||
<ul> | ||
<li><a href="defaults.html">defaults</a></li> | ||
<li><a href="pagination.html">pagination</a></li> | ||
<li><a href="itemsperpage.html">items per page</a></li> | ||
<li><a href="customizebuttons.html">customize buttons</a></li> | ||
<li><a href="custombuttons.html">custom buttons</a></li> | ||
<li><a href="blanklinks.html">blank links</a></li> | ||
<li><a href="titlelinks.html">title links</a></li> | ||
<li><a href="keybrowse.html">key browse</a></li> | ||
<li><a href="scrollbrowse.html">scroll browse</a></li> | ||
<li><a href="auto.html">auto</a></li> | ||
<li><a href="direction.html">direction</a></li> | ||
<li><a href="cssanimation.html">css animation</a></li> | ||
<li><a href="jqueryanimation.html">jQuery animation</a></li> | ||
<li><a href="callback.html">callback</a></li> | ||
<li><a href="jumptopage.html">jump to page</a></li> | ||
<li><a href="destroy.html">destroy</a></li> | ||
<li><a href="lazyload.html">lazy load</a></li> | ||
</ul> | ||
|
||
<h2>Demos</h2> | ||
<ul> | ||
<li><a href="mosaic.html">mosaic</a></li> | ||
<li><a href="gallery.html">gallery</a></li> | ||
<li><a href="table.html">table</a></li> | ||
</ul> | ||
</div> <!--! end of #sidebar --> | ||
|
||
<div id="content" class="defaults"> | ||
|
||
<h2>Auto</h2> | ||
<p>If you want the plugin to automatically rotate the pages you can set a pause in millisenconds to control the length between each page turn.</p> | ||
<p>In case you prefer automatic rotation to stop after clicking on a page link, set the "clickStop" parameter to true.</p> | ||
<p>Parameters "pause" and "clickStop" are false by default.</p> | ||
|
||
<!-- navigation holder --> | ||
<div class="holder"></div> | ||
|
||
<!-- item container --> | ||
<ul id="itemContainer"> | ||
<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> | ||
</ul> | ||
|
||
<!-- navigation holder --> | ||
<div class="holder"></div> | ||
|
||
|
||
</div> <!--! end of #content --> | ||
</div> <!--! end of #container --> | ||
|
||
</body> | ||
</html> |
Oops, something went wrong.