Question

I've been looking on ways on how to make controls/button to manipulate turn.js to make my own magazine web page.

here is my html script

<div id="magazine">
    <div style="background-image:url(pages/01.jpg);"></div>
    <div style="background-image:url(pages/02.jpg);"></div>
    <div style="background-image:url(pages/03.jpg);"></div>
    <div style="background-image:url(pages/04.jpg);"></div>
    <div style="background-image:url(pages/05.jpg);"></div>
    <div style="background-image:url(pages/06.jpg);"></div>
</div>

<a onclick="turntopage(4)">Go to page 4</a>

and i want to make some button controls like Go to page 4. here is the javascript

//initialize turn js
$(window).ready(function() {
    $('#magazine').turn({
        display: 'double',
        acceleration: true,
        gradients: !$.isTouch,
        elevation:50,
        when: {
            turned: function(e, page) {
                /*console.log('Current view: ', $(this).turn('view'));*/
            }
        }
    });
});

there is already way to do some next and previous controls

$(window).bind('keydown', function(e){
    if (e.keyCode==37)
        $('#magazine').turn('previous');
    else if (e.keyCode==39)
        $('#magazine').turn('next');
});

and i want to make controls for go to where ever page i want to go. is there a way i can do this?

Was it helpful?

Solution

There is method for that

$("#magazine").turn("page",4)  // goto page number 4

http://www.turnjs.com/#samples/docs/18

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top