Einen Effekt in einer Bildershow verändern?

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Webhufi

Erfahrenes Mitglied
@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

Erfahrenes Mitglied
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:
Code:
    <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:
Code:
const slider = $z('.zp13slider-container');
//...
slider.flexslider("pause")
//...
slider.flexslider("play")
 

Sempervivum

Erfahrenes Mitglied
Noch ein wenig überarbeitet, damit die gebräuchlichen Buttons für Pause und Fortsetzen angezeigt werden:
Code:
    <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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…