I've been following 2 differents tutorials in jQuery. One for parallax and another one to make a booklet. Both load images in a different way. My images are loaded but in the booklet they are supposed to be in the pages and the pages not displayed yet should be hidden. The problem is all of my divs (with image and text) are shown and pages don't flip.
I'm getting a JavaScript error Uncaught TypeError: undefined is not a function on $mybook.show().booklet({
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"> </script>
<script src="js/vendor/modernizr-2.7.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" media="screen" />
</head>
<body class="loading">
<div id="preload">
<img src="img/slide1.jpg">
<img src="img/slide2.jpg">
<img src="img/slide3.jpg">
</div>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg">
</div>
</section>
<section id="slide-2">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
</div>
</div>
</div>
</section>
<section id="slide-3">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
</div>
</div>
</div>
</section>
<section id="slide-4">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<h1 class="even" >Portfolio</h1>
<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>
<img src="img/1.jpg" alt=""/>
<h1 class="port" >Slider Gallery</h1>
<p>This tutorial is about creating a creative gallery with a
slider for the thumbnails. The idea is to have an expanding
</p>
<a href="http://tympanus.net/codrops/2010/10/07/slider-gallery/" target="_blank" class="article">Article</a>
<a href="http://tympanus.net/Tutorials/SliderGallery/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="img/2.jpg" alt="" />
<h1 class="port" >Animated Portfolio Gallery</h1>
<p>Today we will create an animated portfolio gallery with jQuery.
</p>
<a href="http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/" target="_blank" class="article">Article</a>
<a href="http://tympanus.net/Tutorials/AnimatedPortfolioGallery/" target="_blank" class="demo">Demo</a>
</div>
<div>
<img src="img/3.jpg" alt="" />
<h1 class="port" >Annotation Overlay Effect</h1>
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
</p>
<a href="http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/" target="_blank" class="article">Article</a>
<a href="http://tympanus.net/Tutorials/AnnotationOverlayEffect/" target="_blank" class="demo">Demo</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="slide-5" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
</div>
</div>
</div>
</section>
</main>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/imagesloaded.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/index.js"></script>
</body>
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 550;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
}
} )( jQuery );
$(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 - 3;
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(){}, // callback invoked before each page turn animation
after: function(){} // callback invoked after each page turn animation
});
}
}).attr('src', source);
});
});
Try this loading order:
<script src="js/vendor/modernizr-2.7.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<script src="js/skrollr.js"></script>
<script src="js/index.js"></script>