Einen Effekt in einer Bildershow verändern?

[Webhufi]

Hallo, hier bin ich mal wieder mit einer ungewöhnlichen Angelegenheit...

Auf dieser Seite seht ihr einen herrlichen Effekt in einer Bildershow, der für mich leider nur einen Wunsch nicht erfüllt: ich kann die Show nicht nach belieben anhalten und weiter laufen lassen.

Wäre so etwas machbar?

Viele Grüße und schöne Weihnachten!

Norbert

 

[Webhufi]

@Sempervivum

Ich habe das wieder auf 13 geändert, aber ohne Erfolg...

Auf einer anderen Seite habe ich folgendes gefunden:

<style>
#fancybox-overlay {
opacity: 4.00 !important;
background-color:#7A7A7A !important;
}
</style>

Hier wird die Fancybox direkt angesprochen. Naiv frage ich mal, ob das nicht auch für den Slider funktionieren kann? Statt style halt script.

Bitte nur noch die Hauptseite anschauen.

 

[Sempervivum]

Das war jetzt ein Timing-Problem: Ich hatte es ja getestet, indem ich das Skript an das Ende des body gestellt hatte. Weil dein CMS es nicht anders zulässt, steht es jetzt jedoch im head. D. h. wir müssen einen Eventhandler für document-ready hinzu fügen:

    <script>
        $z(document).ready(() => {
            // Slider bereit stellen
            const slider = $z('.zp13slider-container');
            // Slider wird initialisiert beim Laden des ersten Bildes
            // daher muessen wir ebenfalls bis zu diesem Event warten
            slider.find('li img').first().one("load", function () {
                // Pause-Button erzeugen
                const pauseBtn = $z('<button>Pause</button>');
                // Beim Klick wird der Slider pausiert
                pauseBtn.on('click', () => {
                    slider.flexslider("pause") //Pause slideshow
                });
                // Pause-Button zum Container des Slidders hinzu fuegen
                slider.append($z(pauseBtn));

                // Die selbe Prozedur fuer den Play-Button
                const playBtn = $z('<button>Play</button>');
                playBtn.on('click', () => {
                    slider.flexslider("play") //Continue slideshow
                });
                slider.append($z(playBtn));
            });
        });
    </script>

Hier wird die Fancybox direkt angesprochen. Naiv frage ich mal, ob das nicht auch für den Slider funktionieren kann?

Selbstverständlich, mit diesen Zeilen tue ich nichts anderes, nur dass ich das Ermitteln des Containers und das Pausieren und Fortsetzen getrennt habe:

const slider = $z('.zp13slider-container');
//...
slider.flexslider("pause")
//...
slider.flexslider("play")

 

[Sempervivum]

Noch ein wenig überarbeitet, damit die gebräuchlichen Buttons für Pause und Fortsetzen angezeigt werden:

    <script>
        const playSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"\
    height="100" width="100" viewBox="0 0 100 100">\
    <polygon fill="white" points="20,20 80,50 20,80"/>\
</svg>';
        const pauseSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"\
    height="100" width="100" viewBox="0 0 100 100">\
            <line stroke-width="10" stroke="white" x1="40" y1="20" x2="40" y2="80" />\
            <line stroke-width="10" stroke="white" x1="60" y1="20" x2="60" y2="80" />\
</svg>';
        $z(document).ready(() => {
            // Slider bereit stellen
            const slider = $z('.zp13slider-container');
            // Play-/Pause-Button erzeugen
            const playPauseBtn = $z('<button></button>');
            playPauseBtn.css({
                width: '40px', height: '40px',
                backgroundSize: '100% 100%',
                backgroundImage: 'url(\'data:image/svg+xml;utf8,' + pauseSvg + '\')',
                backgroundColor: 'transparent',
                position: 'absolute', zIndex: '10',
                left: 'calc(50% - 20px)', top: '0',
                border: 'none', outline: 'none'
            })
            // Beim Klick wird der Slider pausiert oder fortgesetzt
            playPauseBtn.on('click', () => {
                if (playPauseBtn.hasClass('paused')) {
                    slider.flexslider("play") // Continue slideshow
                    playPauseBtn.css({ backgroundImage: 'url(\'data:image/svg+xml;utf8,' + pauseSvg + '\')' });
                } else {
                    slider.flexslider("pause") // Pause slideshow
                    playPauseBtn.css({ backgroundImage: 'url(\'data:image/svg+xml;utf8,' + playSvg + '\')' });
                }
                playPauseBtn.toggleClass('paused');
            });
            // Play-/Pause-Button zum Container des Slidders hinzu fuegen
            slider.append($z(playPauseBtn));
        });
    </script>

 

[Webhufi]

Ganz große Klasse, herzlichsten Dank!
Du bist halte 'ne Wucht...

Euch beiden einen wundertollen Rutsch und alles Beste im neuen Jahr!!!

Viele Grüße
Norbert

 

[Sempervivum]

Na super, dass wir zum Ziel gekommen sind.
Ich wünsche ebenfalls einen guten Rutsch und ein glückliches und gesundes 2021!
Beste Grüße - Ulrich