Foros del Web - Ver Mensaje Individual

pollin14 · #1 (**permalink**) 06/05/2013, 14:17

Hola!

Yo estoy intentando sacar el ejemplo basico que aparace en "getting started" en http://www.turnjs.com/# Sin embargo no logro crear la pasta gruesa.

Usando firebug descarge basic.css (lo renombre a book.css) y basic.js pero aun así no logro hacer que la primera pagina simule una pasta dura.

Aqui pongo mi codigo que tengo actualmente, esperando que alguien me pueda ayudar.

HTML

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="book.css" rel="stylesheet">
    <script src="jquery-1.9.1.min.js"></script>
    <script src="jquery.turn.min.js"></script>
    <script src="basic.js"></script>
    </head>
    <body>
    <div id="sample-viewer"></div>
    </body>
</html>

basic.js

Código Javascript:

Ver original$(document).ready(function($) {
    var container = $('<div />', {
    css: {
        margin: 'auto', 
        width:400, 
        height:300
    }
    })
    .appendTo($('#sample-viewer'));
    $('<div />', {
    'class': 'sample-flipbook'
    })
    .appendTo(container)
    .html(
    '<div class="hard"> Turn.js </div>' +
    '<div class="hard"></div>' +
    '<div>Page 1</div>' +
    '<div>Page 2</div>' +
    '<div>Page 3</div>' +
    '<div>Page 4</div>' +
    '<div class="hard"></div>' +
    '<div class="hard"></div>'
    );
    // Wait until it renders
    $('.sample-flipbook').turn({
    width:400,
    height:300,
    autoCenter: true,
    shadows: $.isTouch,
    acceleration: $.isTouch
    });
})

book.css

Código CSS:

Ver original.sample-flipbook {
    height: 200px;
    transition: margin-left 0.2s ease 0s;
    width: 400px;
}
.sample-flipbook .page {
    background-color: white;
    font-size: 20px;
    height: 200px;
    line-height: 300px;
    width: 200px;
}
.sample-flipbook .page-wrapper {
    perspective: 2000px;
}
.sample-flipbook .hard {
    background: none repeat scroll 0 0 #CCCCCC !important;
    box-shadow: 0 0 5px #666666 inset;
    color: #333333;
    font-weight: bold;
}
.sample-flipbook .odd {
    background-image: -moz-linear-gradient(right center , #FFFFFF 95%, #C4C4C4 100%);
    box-shadow: 0 0 5px #666666 inset;
}
.sample-flipbook .even {
    background-image: -moz-linear-gradient(left center , #FFFFFF 95%, #DADADA 100%);
    box-shadow: 0 0 5px #666666 inset;
}