jQuery BookBlock Software And Tutorial

Click arrows to turn pages.

jQuery Bookblock Software & tutorial is an installation guide for adding the plugin code into your webpage. You must have some webmastering skills to accomplish the tasks ahead. Get the plugin below and unzip it to your computer. I promise is it safe and virus free.

Then follow the step by step instructions to guide you through uploading to your website. Get a deeper understanding of the jQuery Bookblock Software plugin courtesy of tympanus.net by: Pedro Botelho

Then come back here to learn how to add the code to your website and make it mobile responsive. Use the arrows below to navigate through the tutorial. Next: bookblock-responsive.css

bookblock-responsive.css is the file that contains the style rules that override the height and width attributes of the book.

There are many variables that can be adjusted in the css files. If you are an inexperienced coder then don't worry about it. Stick with the default settings.

The default height is 400px and the width is 300px and can be found in the bookblock.css file. However these can be made responsive. Get the add-on to do that. The 'bookblock-responsive.css' code changes the height and width properties of the book for screens on mobile devices.

Next Theory and usage.

jQuery Bookblock Software Theory and Usage

The javascript programs the function of flipping between pages. The CSS file contains the styling. The actual content is in the HTML page.

Caution: You must plan your content to fit into the page. If the content is more than the 400px in height it could cover the navigation arrows preventing them from working.

Next CSS code.

CSS Code

<link rel="stylesheet" type="text/css" href="https://www.best-website-tools.com/support-files/bookblock.css" /> <link rel="stylesheet" type="text/css" href="https://www.best-website-tools.com/support-files/demo1.css" /> <link rel="stylesheet" type="text/css" href="https://www.best-website-tools.com/support-files/bookblock-responsive.css" /> <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">

The CSS files must be in the order shown above. The emoji CSS brings in the arrow icons.

Next: Javascript code.

Javascript Code

<script src="https://www.best-website-tools.com/support-files/modernizr.custom.js"></script> <script type="text/javascript"> $(function() { $( '#bb-bookblock' ).bookblock(); });</script>

These jacascript codes need to be placed at the bottom of the page just before the closing 'body' tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://www.best-website-tools.com/support-files/jquerypp.custom.js"></script> <script src="https://www.best-website-tools.com/support-files/jquery.bookblock.js"></script> Next:HTML code.

Bookblock Tutorial HTML Code

<div class="bb-custom-wrapper"> <h2>Your TITLE Goes Here</h2> <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> -- your content goes here -- <div class="bb-pagenum">1</div> </div> <div class="bb-item"> -- your content goes here -- <div class="bb-pagenum">2</div> </div> <div class="bb-item"> -- your content goes here -- <div class="bb-pagenum">3</div> </div> <div class="bb-item"> -- your content goes here -- <div class="bb-pagenum">4</div> </div> <div class="bb-item"> -- your content goes here -- <div class="bb-pagenum">5</div> </div><div style="clear:both; height:20px"></div></div> <div align="center"> <a id="bb-nav-first" href="#" class="bb-custom-icon"><i class="em em-rewind"></i></a> <a id="bb-nav-prev" href="#" class="bb-custom-icon"><i class="em em-arrow_left"></i></a> <a id="bb-nav-next" href="#" class="bb-custom-icon"><i class="em em-arrow_right"></i></a> <a id="bb-nav-last" href="#" class="bb-custom-icon"><i class="em em-fast_forward"></i></a> </div></div> Next: Page Bottom Javascript code.

Page Bottom Javascript code

<script> var Page = (function() { var config = { $bookBlock : $( '#bb-bookblock' ), $navNext : $( '#bb-nav-next' ), $navPrev : $( '#bb-nav-prev' ), $navFirst : $( '#bb-nav-first' ), $navLast : $( '#bb-nav-last' ) }, init = function() { config.$bookBlock.bookblock( { speed : 800, shadowSides : 0.8, shadowFlip : 0.7 } ); initEvents(); }, initEvents = function() { var $slides = config.$bookBlock.children(); // add navigation events config.$navNext.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'next' ); return false; } ); config.$navPrev.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'prev' ); return false; } ); config.$navFirst.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'first' ); return false; } ); config.$navLast.on( 'click touchstart', function() { config.$bookBlock.bookblock( 'last' ); return false; } ); // add swipe events $slides.on( { 'swipeleft' : function( event ) { config.$bookBlock.bookblock( 'next' ); return false; }, 'swiperight' : function( event ) { config.$bookBlock.bookblock( 'prev' ); return false; } } ); // add keyboard events $( document ).keydown( function(e) { var keyCode = e.keyCode || e.which, arrow = { left : 37, up : 38, right : 39, down : 40 }; switch (keyCode) { case arrow.left: config.$bookBlock.bookblock( 'prev' ); break; case arrow.right: config.$bookBlock.bookblock( 'next' ); break; } } ); }; return { init : init }; })(); </script> <script> Page.init(); </script> Next: Page Numbering.

Page Numbering

Page numbering is accomplished by including a small container rule in the bookblock-responsive.css file. The HTML code for this goes at the end of the page. Page numbering is exclusive to this tutorial. We created a small container that holds the number.

<div class="bb-pagenum">#</div>

The CSS style rule for it is included in the bookblock-responsive.css. If you copy and paste this code don't forget to update the number. Nothing so bad as a book whose page numbers are out of order.

Place this code at the end of your content per page. To remove page numbering, simply remove the code. Next: Usage Tips.

jQuery Bookblock Software Usage Tips

Some clever ideas would be to use this as a childrens book for learning, Or as a step by step tutorial like this one. You may want to do a short presentation. Or make a game with it. Or use as an image gallery. Or you could make a short story. Note the default height is set at 400px and can be modified in the bookblock-responsive.css file.

Disclaimer. This bookblock tutorial comes as is. No guarantees are given to performance. No liability can be claimed for any damage.

Need support? Got any questions? Contact me. That's it, thanks for reading. The End