CODEWITHSUNDEEP
javascriptjqueryhtml
Low-Pointer
Low-Pointer

Reputation: 163

Turn.js (flipbook effect) is not working

Sorry, but I am not getting where actually I did the mistake (as I am a newbie to javascript). I wrote this code for the flipbook effect using turn.js with the help of a tutorial. But the output in a browser is just showing the blank screen. I guess, there must be an awkward mistake but m still not getting it . plz help. 

<html>
<head>

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>

<style type="text/css">
    body{
        background: #9988aa;
    }
    #book{
        width: 1152px;
        height: 400px;
    }
    #book .turn-page{
        background-color: #ddd;
        background-size: 100% 100%;
    }
</style>

</head>

<body>
<div id="book">
    <div style="background-image:url('images/1.jpg');"></div>
    <div style="background-image:url('images/2.jpg');"></div>
    <div style="background-image:url('images/3.jpg');"></div>
    <div style="background-image:url('images/4.jpg');"></div>
    <div style="background-image:url('images/5.jpg');"></div>
    <div style="background-image:url('images/6.jpg');"></div>
    <div style="background-image:url('images/7.jpg');"></div>
    <div style="background-image:url('images/8.jpg');"></div>
</div>

<script type="text/javascript">

    $(window).ready(function(){
        $('#book').turn({
            display:'double',
            acceleration: true,
            elevation:50;
        });
    });

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

</script>


</body>


</html>

Upvotes: 1

Views: 5188

Answers (1)

Kamal Panhwar
Kamal Panhwar

Reputation: 2399

Hi there is small error in your code, kindly just remove semi colon from following line.

elevation:50;

It should be like following, just remove semi colon. Hope it will resolve your issue.

$(window).ready(function(){
    $('#book').turn({
        display:'double',
        acceleration: true,
        elevation:50
    });
});

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

Upvotes: 2

Related Questions