JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://pen-n-hand.businesscatalyst.com/stylesheets/base.css">
<link rel="stylesheet" href="http://pen-n-hand.businesscatalyst.com/stylesheets/skeleton.css">
<link rel="stylesheet" href="http://pen-n-hand.businesscatalyst.com/stylesheets/layout.css">
<link rel="stylesheet" href="http://pen-n-hand.businesscatalyst.com/javascripts/booklet/jquery.booklet.1.1.0.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://pen-n-hand.businesscatalyst.com/javascripts/easing.js"></script>
<script src="http://pen-n-hand.businesscatalyst.com/javascripts/booklet/jquery.booklet.1.1.0.min.js"></script>
<link rel="stylesheet" href="http://pen-n-hand.businesscatalyst.com/stylesheets/booklet.css">
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Loading...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<h2>Pen N Hand's Artwork </h2>
</div>
<div>
<img src="http://pen-n-hand.businesscatalyst.com/images/artwork/earl.jpg" alt="" />
</div>
</div>
</div>
</div>
JavaScript
$(function() {
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({
width: 800, // container width
height: 500, // container height
speed: 600, // speed of the transition between pages
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...