|
|
Line 1: |
Line 1: |
| <html> | | <html> |
- | <script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/cufon-yui.js" type="text/javascript"></script> | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> |
- | <script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/ChunkFive_400.font.js" type="text/javascript"></script> | + | <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script> |
- | <script src="http://tympanus.net/Tutorials/MoleskineNotebook/cufon/Note_this_400.font.js" type="text/javascript"></script> | + | <script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script> |
- | <script type="text/javascript"> | + | <script src="booklet/jquery.booklet.1.2.0.min.js" type="text/javascript"></script> |
- | Cufon.replace('h1,p,.b-counter');
| + | <link href="booklet/jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet" media="screen, projection, tv" /> |
- | Cufon.replace('.book_wrapper a', {hover:true});
| + | |
- | Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
| + | |
- | Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
| + | |
- | Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
| + | |
- | </script>
| + | |
- | | + | |
- | <div class="book_wrapper">
| + | |
- | | + | |
- | <a id="next_page_button"></a>
| + | |
- | <a id="prev_page_button"></a>
| + | |
- | | + | |
- | <div id="loading" class="loading">Loading pages...</div>
| + | |
- | | + | |
- | <div id="mybook" style="display:none;">
| + | |
- | <div class="b-load">
| + | |
- | | + | |
- | <div>
| + | |
- | <h1>Slider Gallery</h1>
| + | |
- | <p>This tutorial is about creating a creative gallery...</p>
| + | |
- | <a href="#" class="article">Article</a>
| + | |
- | <a href="#" class="demo">Demo</a>
| + | |
- | </div>
| + | |
- | | + | |
- | <div>
| + | |
- | ...
| + | |
- | </div>
| + | |
| | | |
| + | <div id="mybook"> |
| + | <div class="b-load"> |
| + | <div> |
| + | <h3>Yay, Page 1!</h3> |
| + | </div> |
| + | <div> |
| + | <h3>Yay, Page 2!</h3> |
| + | </div> |
| + | <div> |
| + | <h3>Yay, Page 3!</h3> |
| + | </div> |
| + | <div> |
| + | <h3>Yay, Page 4!</h3> |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
| | | |
- | <style type="text/css">
| |
- | .booklet{
| |
- | -moz-box-shadow:0px 0px 1px #fff;
| |
- | -webkit-box-shadow:0px 0px 1px #fff;
| |
- | box-shadow:0px 0px 1px #fff;
| |
- | -moz-border-radius:10px;
| |
- | -webkit-border-radius:10px;
| |
- | border-radius:10px;
| |
- | }
| |
- | .booklet .b-wrap-left{
| |
- | background:#fff url(http://tympanus.net/Tutorials/MoleskineNotebook/images/left_bg.jpg) no-repeat top left;
| |
- | -webkit-border-top-left-radius: 10px;
| |
- | -webkit-border-bottom-left-radius: 10px;
| |
- | -moz-border-radius-topleft:10px;
| |
- | -moz-border-radius-bottomleft: 10px;
| |
- | border-top-left-radius: 10px;
| |
- | border-bottom-left-radius: 10px;
| |
- | }
| |
- | .booklet .b-wrap-right{
| |
- | background:#efefef url(http://tympanus.net/Tutorials/MoleskineNotebook/images/right_bg.jpg) no-repeat top left;
| |
- | -webkit-border-top-right-radius: 10px;
| |
- | -webkit-border-bottom-right-radius: 10px;
| |
- | -moz-border-radius-topright: 10px;
| |
- | -moz-border-radius-bottomright: 10px;
| |
- | border-top-right-radius: 10px;
| |
- | border-bottom-right-radius: 10px;
| |
- | }
| |
- | .booklet .b-counter{
| |
- | bottom:10px;
| |
- | position:absolute;
| |
- | display:block;
| |
- | width:90%;
| |
- | height:20px;
| |
- | border-top:1px solid #ddd;
| |
- | color:#222;
| |
- | text-align:center;
| |
- | font-size:12px;
| |
- | padding:5px 0 0;
| |
- | background:transparent;
| |
- | -moz-box-shadow:0px -1px 1px #fff;
| |
- | -webkit-box-shadow:0px -1px 1px #fff;
| |
- | box-shadow:0px -1px 1px #fff;
| |
- | opacity:0.8;
| |
- | }
| |
- | .book_wrapper{
| |
- | margin:0 auto;
| |
- | padding-top:50px;
| |
- | width:905px;
| |
- | height:540px;
| |
- | position:relative;
| |
- | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/bg.png) no-repeat 9px 27px;
| |
- |
| |
- | .book_wrapper h1{
| |
- | color:#13386a;
| |
- | margin:5px 5px 5px 15px;
| |
- | font-size:26px;
| |
- | padding-bottom:7px;
| |
- | }
| |
- | .book_wrapper p{
| |
- | font-size:16px;
| |
- | margin:5px 5px 5px 15px;
| |
- | }
| |
- | .book_wrapper a.article,
| |
- | .book_wrapper a.demo{
| |
- | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/circle.png) no-repeat 50% 0px;
| |
- | display:block;
| |
- | width:95px;
| |
- | height:41px;
| |
- | text-decoration:none;
| |
- | outline:none;
| |
- | font-size:16px;
| |
- | color:#555;
| |
- | float:left;
| |
- | line-height:41px;
| |
- | padding-left:47px;
| |
- | }
| |
- | .book_wrapper a.demo{
| |
- | margin-left:50px;
| |
- | }
| |
- | .book_wrapper a.article:hover,
| |
- | .book_wrapper a.demo:hover{
| |
- | background-position:50% -41px;
| |
- | color:#13386a;
| |
- | }
| |
- | .book_wrapper img{
| |
- | margin:10px 0px 5px 35px;
| |
- | width:300px;
| |
- | padding:4px;
| |
- | border:1px solid #ddd;
| |
- | -moz-box-shadow:1px 1px 1px #fff;
| |
- | -webkit-box-shadow:1px 1px 1px #fff;
| |
- | box-shadow:1px 1px 1px #fff;
| |
- | }
| |
- |
| |
- | .booklet .b-wrap-right img{
| |
- | border:1px solid #E6E3C2;
| |
- | }
| |
- |
| |
- | a#next_page_button,
| |
- | a#prev_page_button{
| |
- | display:none;
| |
- | position:absolute;
| |
- | width:41px;
| |
- | height:40px;
| |
- | cursor:pointer;
| |
- | margin-top:-20px;
| |
- | top:50%;
| |
- | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/buttons.png) no-repeat 0px -40px;
| |
- | }
| |
- | a#prev_page_button{
| |
- | left:-30px;
| |
- | }
| |
- | a#next_page_button{
| |
- | right:-30px;
| |
- | background-position:-41px -40px;
| |
- | }
| |
- | a#next_page_button:hover{
| |
- | background-position:-41px 0px;
| |
- | }
| |
- | a#prev_page_button:hover{
| |
- | background-position:0px 0px;
| |
- | }
| |
- |
| |
- | .loading{
| |
- | width:160px;
| |
- | height:56px;
| |
- | position: absolute;
| |
- | top:50%;
| |
- | margin-top:-28px;
| |
- | right:135px;
| |
- | line-height:56px;
| |
- | color:#fff;
| |
- | padding-left:60px;
| |
- | font-size:15px;
| |
- | background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%;
| |
- | opacity: 0.7;
| |
- | z-index:9999;
| |
- | -moz-border-radius:20px;
| |
- | -webkit-border-radius:20px;
| |
- | border-radius:20px;
| |
- | }
| |
- |
| |
- |
| |
- | </style>
| |
- |
| |
- | <script type="text/javascript">
| |
- | var $mybook = $('#mybook');
| |
- | var $bttn_next = $('#next_page_button');
| |
- | var $bttn_prev = $('#prev_page_button');
| |
- | var $loading = $('#loading');
| |
- | var $mybook_images = $mybook.find('img');
| |
- | var cnt_images = $mybook_images.length;
| |
- | var loaded = 0;
| |
- | //preload all the images in the book,
| |
- | //and then call the booklet plugin
| |
- |
| |
- | $mybook_images.each(function(){
| |
- | var $img = $(this);
| |
- | var source = $img.attr('src');
| |
- | $('<img/>').load(function(){
| |
- | ++loaded;
| |
- | if(loaded == cnt_images){
| |
- | $loading.hide();
| |
- | $bttn_next.show();
| |
- | $bttn_prev.show();
| |
- | $mybook.show().booklet({
| |
- | name: null,
| |
- | // name of the booklet to display in the document title bar
| |
- | width: 800,
| |
- | // container width
| |
- | height: 500,
| |
- | // container height
| |
- | speed: 600,
| |
- | // speed of the transition between pages
| |
- | direction: 'LTR',
| |
- | // direction of the overall content
| |
- | // organization, default LTR, left to right, can be
| |
- | // RTL for languages which read right to left
| |
- | startingPage: 0,
| |
- | // index of the first page to be displayed
| |
- | easing: 'easeInOutQuad',
| |
- | // easing method for complete transition
| |
- | easeIn: 'easeInQuad',
| |
- | // easing method for first half of transition
| |
- | easeOut: 'easeOutQuad',
| |
- | // easing method for second half of transition
| |
- |
| |
- | closed: true,
| |
- | // start with the book "closed", will add empty
| |
- | // pages to beginning and end of book
| |
- | closedFrontTitle: null,
| |
- | // used with "closed", "menu" and "pageSelector",
| |
- | // determines title of blank starting page
| |
- | closedFrontChapter: null,
| |
- | // used with "closed", "menu" and "chapterSelector",
| |
- | // determines chapter name of blank starting page
| |
- | closedBackTitle: null,
| |
- | // used with "closed", "menu" and "pageSelector",
| |
- | // determines chapter name of blank ending page
| |
- | closedBackChapter: null,
| |
- | // used with "closed", "menu" and "chapterSelector",
| |
- | // determines chapter name of blank ending page
| |
- | covers: false,
| |
- | // used with "closed", makes first and last pages
| |
- | //into covers, without page numbers (if enabled)
| |
- |
| |
- | pagePadding: 10,
| |
- | // padding for each page wrapper
| |
- | pageNumbers: true,
| |
- | // display page numbers on each page
| |
- |
| |
- | hovers: false,
| |
- | // enables preview pageturn hover animation,
| |
- | // shows a small preview of previous or next page on hover
| |
- | overlays: false,
| |
- | // enables navigation using a page sized overlay,
| |
- | // when enabled links inside the content will
| |
- | // not be clickable
| |
- | tabs: false,
| |
- | // adds tabs along the top of the pages
| |
- | tabWidth: 60,
| |
- | // set the width of the tabs
| |
- | tabHeight: 20,
| |
- | // set the height of the tabs
| |
- | arrows: false,
| |
- | // adds arrows overlayed over the book edges
| |
- | cursor: 'pointer',
| |
- | // cursor css setting for side bar areas
| |
- |
| |
- | hash: false,
| |
- | // enables navigation using a hash string,
| |
- | // ex: #/page/1 for page 1, will affect
| |
- | // all booklets with 'hash' enabled
| |
- | keyboard: true,
| |
- | // enables navigation with arrow keys
| |
- | // (left: previous, right: next)
| |
- | next: $bttn_next,
| |
- | // selector for element to use as click
| |
- | // trigger for next page
| |
- | prev: $bttn_prev,
| |
- | // selector for element to use as click
| |
- | // trigger for previous page
| |
- |
| |
- | menu: null,
| |
- | // selector for element to use as the menu area,
| |
- | // required for 'pageSelector'
| |
- | pageSelector: false,
| |
- | // enables navigation with a dropdown menu of pages,
| |
- | // requires 'menu'
| |
- | chapterSelector: false,
| |
- | // enables navigation with a dropdown menu of chapters,
| |
- | // determined by the "rel" attribute, requires 'menu'
| |
- |
| |
- | shadows: true,
| |
- | // display shadows on page animations
| |
- | shadowTopFwdWidth: 166,
| |
- | // shadow width for top forward anim
| |
- | shadowTopBackWidth: 166,
| |
- | // shadow width for top back anim
| |
- | shadowBtmWidth: 50,
| |
- | // shadow width for bottom shadow
| |
| | | |
- | before: function(){},
| + | $(function() { |
- | // callback invoked before each page turn animation
| + | //single book |
- | after: function(){}
| + | $('#mybook').booklet(); |
- | // callback invoked after each page turn animation
| + | |
- | });
| + | //multiple books with ID's |
- | Cufon.refresh(); // if you want to use cufon
| + | $('#mybook1, #mybook2').booklet(); |
- | }
| + | |
- | }).attr('src',source); | + | //multiple books with a class |
| + | $('.mycustombooks').booklet(); |
| }); | | }); |
| | | |
- | </script>
| |
| </html> | | </html> |
$(function() {
//single book
$('#mybook').booklet();
//multiple books with ID's
$('#mybook1, #mybook2').booklet();
//multiple books with a class
$('.mycustombooks').booklet();
});