• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sliderbar in Html erstellen für Blätterbares Flipbook

P

Peter Pan

Neues Mitglied
Hey!
Ich erstelle gerade ein digitales Buch mit Hilfe von Turn.Js und Jquery. Jetzt würde ich gerne um nicht jedes Mal die Seiten mit Mausklick selber durchblättern zu müssen mit einer Scrollbar schnell zwischen Seiten hin und her springen. Bin aber relativ neu zu Html und habe nur diesen Code vorgeschlagen bekomen:

( "#slider" ).slider({
min: 1,
max: 100,

start: function(event, ui) {
if (!window._thumbPreview) {
_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
setPreview(ui.value);
_thumbPreview.appendTo($(ui.handle));
} else
setPreview(ui.value);

moveBar(false);
},

slide: function(event, ui) {
setPreview(ui.value);
},

stop: function() {
if (window._thumbPreview)
_thumbPreview.removeClass('show');

$('.sample-docs').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
}
});


Jetzt weiß ich nicht ganz, wie ich den Slider formatieren und das ganze mit Jquery in meine Html datein integrieren soll. Ich habe auf den Buchseiten eigentlich nur Bilder.

Tipps, bzw Code wären echt super!

Danke :))!
 
Werbung:
Genau.
Hast du mal oben auf so ein Buch geklickt ?
Dann hast du ja so ein Slider mit sowas wie einer Scrollbar unter den Buch.
Das sollte ja das sein was du suchst ?
 
Sempervivum schrieb:
Das Beispiel auf turnjs.com lädt ja ewig.
Aber da gibt es doch solch einen Slider. Kannst Du den nicht einfach übernehmen?
Zum Vergrößern anklicken....

Ja voll, aber der ist irgendwie auf 10 Dokumente und links aufgeteilt und ich wollte schauen ob es eine simplere Version gibt, wo ich das nicht alles rauskopieren muss weil das pack ich leider nicht ganz auf meinen Code umzulegen :///
 
Werbung:
Sempervivum schrieb:
PS: Kompliziert nur, wenn man versucht, das von der Website von turn.js zu übernehmen. Aber einfach, wenn man einfach den Slider von jQuery-UI verwendet. Hier eine Demo, die auf der Basic-Demo von turn.js aufbaut:
Code: 
<!doctype html>
<html lang="en">

<head>
    <meta name="viewport" content="width = 1050, user-scalable = no" />
    <script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
    <script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

    <div class="flipbook-viewport">
        <div class="container">
            <div class="flipbook">
                <div style="background-image:url(pages/1.jpg)"></div>
                <div style="background-image:url(pages/2.jpg)"></div>
                <div style="background-image:url(pages/3.jpg)"></div>
                <div style="background-image:url(pages/4.jpg)"></div>
                <div style="background-image:url(pages/5.jpg)"></div>
                <div style="background-image:url(pages/6.jpg)"></div>
                <div style="background-image:url(pages/7.jpg)"></div>
                <div style="background-image:url(pages/8.jpg)"></div>
                <div style="background-image:url(pages/9.jpg)"></div>
                <div style="background-image:url(pages/10.jpg)"></div>
                <div style="background-image:url(pages/11.jpg)"></div>
                <div style="background-image:url(pages/12.jpg)"></div>
            </div>
        </div>
    </div>
    <div id="slider"></div>


    <script type="text/javascript">

        function loadApp() {

            // Create the flipbook

            $('.flipbook').turn({
                // Width

                width: 922,

                // Height

                height: 600,

                // Elevation

                elevation: 50,

                // Enable gradients

                gradients: true,

                // Auto center this flipbook

                autoCenter: true

            });
        }

        // Load the HTML4 version if there's not CSS transform

        yepnope({
            test: Modernizr.csstransforms,
            yep: ['../../lib/turn.js'],
            nope: ['../../lib/turn.html4.min.js'],
            both: ['css/basic.css'],
            complete: loadApp
        });

        const min = 1, max = $('.flipbook>div').length;
        $("#slider").slider({
            min: min,
            max: max,
            slide: function (event, ui) {
                console.log(ui.value);
                $(".flipbook").turn("page", ui.value);
            }
        });
    </script>

</body>

</html>
Man braucht lediglich den Maximalwert aus dem HTML zu holen.
Zum Vergrößern anklicken....

Oh Vielen lieben DanK :))!
 
Werbung:
Sempervivum schrieb:
Das kann ich mir auch nur vage zusammen reimen: Es wird mit Modernizr getestet ob der Browser CSS-Transformationen unterstützt. Bei yep - ja wird turn.js geladen, bei nope - nein dagegen turn.html4.min.js. Letzteres funktioniert offenbar auch ohne CSS-Transformationen.
Zum Vergrößern anklicken....

Danke, hat super funktioniert!

Lg :))
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben