0

There is a demo of the BookBlock jquery plugin on this page:

http://tympanus.net/Development/BookBlock/

I am using this code after the page has loaded:

$.getScript('//www.mysite.com/modernizr.custom.js'); 
$.getScript('//www.mysite.com/jquerypp.custom.js'); 
$.getScript('//www.mysite.com/jquery.bookblock.js'); 
HTMLtoAppend="<div class='bb-item'><a href="example.com">';
HTMLtoAppend+='<img src="example.jpg" width="400" height="300"></a></div>';
$('#bb-bookblock').append(HTMLtoAppend);
$('#bb-bookblock').bookblock();
$('#bb-next').on('click', function() { $( '#bb-bookblock').bookblock('next') });
$('#bb-prev').on('click', function() { $( '#bb-bookblock').bookblock('prev') });

The image appears no proble, the HTML is appended nicely, but the plugin will not work.

Any help would be appreciated.

Cymro
  • 1,201
  • 1
  • 11
  • 29

2 Answers2

2

The Codrops Article that the demo references has a pretty good description about how to use the plugin, including a description of the options for configuration and the methods to call to get the pages to flip.

The source on the demo pages look like it's pretty easy to work out how to use. There's a section initializing the plugin and a much larger section for event handling.

At the bare minimum, you would need something like the following:

$( '#bb-bookblock' ).bookblock(); //initialization

//Make the pages flip by binding the click event on a 'Next' and 'Previous' button.
$( '#bb-next').on('click', function() { $( '#bb-bookblock' ).bookblock('next') });
$( '#bb-prev').on('click', function() { $( '#bb-bookblock' ).bookblock('prev') });

Why all the code on the demo pages? It's just that developer's way of organizing the code.

villecoder
  • 13,323
  • 2
  • 33
  • 52
  • Thanks very much. You code looks logical. However, in the demo, this code is not present. A significant amount of inline is present which makes it all very confusing. Also, 3 CSS files are called: default, bookblock and demo1. Including them is messing up my site. It would be good to know as a bare minimum which css file is needed to get it to work. Thanks! – Cymro Dec 31 '14 at 19:07
  • Just to clarify: Is the inline javascript on the demo page necessary? Are is you jquery code above enough? – Cymro Dec 31 '14 at 19:09
  • The above code should be enough to initialize the plugin and bind the necessary functions to go to the next and previous pages. You probably only need the bookblock.css file (default is likely the site-wide stylesheet and demo1 is the custom stylesheet for that one page). – villecoder Dec 31 '14 at 19:30
  • 1
    Have tried to follow your advice but to no avail. Have edited my question to show the code I wrote after receiving your answer. If something is not clear, please let me know. – Cymro Jan 02 '15 at 22:39
0

To wrap this up, I could not get the plugin to run using the code stated on the demo page:

$( '#bb-bookblock' ).bookblock(); //initialization

It would only run by including the copious inline javascript.

Cymro
  • 1,201
  • 1
  • 11
  • 29