CODEWITHSUNDEEP
jqueryhtmlturn.js
Martti
Martti

Reputation: 13

How to make turn.js pages "clickable"

I am currently working with turn.js to create a flipbook. And at the moment I am trying to figure out how to make pages clickable so it would change to next or previous page when you are hovering over the page.

I have tried searching for topics with similar issue but no luck so far, also I have checked the official documentation for turn.js but so far, nothing. Question is: Is there a way to select pages and give them classes like .previous or .next to get the desired effect?

HTML

<div class="container">
    <div id="flipbook">
        <div class="hard">Headline</div>
        <div class="hard"></div>
        <div>Chapter 1</div>
        <div>Chapter 2</div>
        <div>Chapter 3</div>
        <div>The End</div>
        <div class="hard"></div>
        <div class="hard"></div>
    </div>
</div>

Jquery

$( ".container" ).click(function() {
  $("#flipbook").turn("next");
});

$( ".container" ).click(function() {
 $("#flipbook").turn("previous");
});

Since I have wrapped the flipbook into a container, I am currently selecting that one container for both events, what I am trying to achieve is that when you click on the left side of the book, it switches to previous page, and when I click the right side, it switches to next page.

Upvotes: 1

Views: 2370

Answers (2)

Clain Dsilva
Clain Dsilva

Reputation: 1651

I was handling with 128 pages dynamically loaded flip-book which needed a just in time event binding as looping through the pages can be less efficient. Hence, on a wider scope, I used this.

$(function() {

  $(document).on("click", "#flipbook .even", function(event) {
     $("#flipbook").turn("previous");
  });

  $(document).on("click", " #flipbook .odd", function(event) {
     $("#flipbook").turn("next");
  });

});

This automatically binds to the newly created pages as well as avoids the need to have a loop.

Upvotes: 0

Henfs
Henfs

Reputation: 5411

When you create a flipbook using turn.js, each page has .odd or .even class.
You can use it to create a click event in order to turn next or previous page:

$('#flipbook .even').each(function() {
   $(this).parents().eq(1).click(function() { $("#flipbook").turn("previous") });
}) 

$('#flipbook .odd').each(function() {
   $(this).parents().eq(1).click(function() { $("#flipbook").turn("next") });
})

Upvotes: 0

Related Questions