Sliderbar in Html erstellen für Blätterbares Flipbook

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

Peter Pan

Neues Mitglied
31 März 2020
16
0
1
22
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 :))!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Das Beispiel auf turnjs.com lädt ja ewig.
Aber da gibt es doch solch einen Slider. Kannst Du den nicht einfach übernehmen?
 

basti1012

Senior HTML'ler
26 November 2017
1.687
177
63
Minden
basti1012.de
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 ?
 

Peter Pan

Neues Mitglied
31 März 2020
16
0
1
22
Das Beispiel auf turnjs.com lädt ja ewig.
Aber da gibt es doch solch einen Slider. Kannst Du den nicht einfach übernehmen?

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 :///
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Ein wenig komplizierter als ich dachte. Ich muss das erst Mal unterbrechen, vielleicht nimmt sich jemand anders dieser Sache an.
 
  • Like
Reaktionen: Peter Pan

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
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.
 
  • Like
Reaktionen: Peter Pan

Peter Pan

Neues Mitglied
31 März 2020
16
0
1
22
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.

Oh Vielen lieben DanK :))!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
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.
 
  • Like
Reaktionen: Peter Pan

Peter Pan

Neues Mitglied
31 März 2020
16
0
1
22
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.

Danke, hat super funktioniert!

Lg :))
 
Werbung: