VegasSlider (vslider)

klawin · 12.02.2021 17:39:22

Guten Abend,

ich habe mich mal (noch) intensiver mit der Vegas Background Slideshow beschäftigt. Als Ergebnis gibt es ein neues Modul 'VegasSlider'. Die beste Erklärung dazu liefert wohl die Datei README:

Allgemeines

Das Modul steuert die Vegas Background Slideshow von Jay Salvat in der Version 2.5.4 ( http://vegas.jaysalvat.com/ ).

Modulverzeichnis ist <wbce>/modules/vslider.
Bildverzeichnis ist <wbce>/media/vslider.
Modulname ist 'VegasSlider'

Grundsätzlich kann die Ausgabe in jedem Block erfolgen; somit sind sowohl Page- als auch Topslider möglich.
Dabei können mehrere Slider je Seite aktiviert werden.

Generelle Einstellungen

Navigation

Navigationselemente (Ein/Aus)

Unterhalb des Bereiches für die Bilder können Bedienelemente zur manuellen Navigation angezeigt werden. Es sind die üblichen 'Knöpfe' für Erster Slide, voriger Slide, nächster Slide und letzter Slide.

Endlos navigieren (Ein/Aus)

Verändert das Verhalten der Navigationselemente. Bei (Aus) stoppt die Navigation an den jeweiligen 'Enden'. Es wird dann also nicht 'im Kreis' geblättert.

Start/Pause-Umschalter (Ein/Aus)

Bei (Ein) kann eine automatisch laufende Slideshow durch Klick auf das aktuelle Bild gestoppt werden. Bei (Aus) ist der Klick unwirksam.

Pause anzeigen (Ein/Aus)

Bei (Ein) wird bei der Pause ein kleiner Hinweis in der rechten oberen Ecke des Bildes angezeigt. Bei (Aus) erscheint der Hinweis nicht.

Textanimation

Texte anzeigen (Ein/Aus)

Es kann für jedes Bild eine kurze Überschrift und ein beschreibender Text unter der Überschrift definiert werden. Diese Texte werden dann im oberen linken Bereich im Bild angezeigt. Bei (Aus) erscheint kein Text.

Slideshow

Automatischer Start (Ein/Aus)

Bei (Ein) startet die Slideshow automatisch nach dem Aufruf der Seite. Bei (Aus) sind nur noch die Navigationselemente (siehe oben) aktiv.

Timer anzeigen (Ein/Aus)

Bei (Ein) zeigt ein schmaler Balken am unteren Bildrand die noch verbleibende Zeit für das aktuelle Bild an. Ist der Balken am rechten Ende angekommen, wechselt das Bild.

Overlay anzeigen (Ein/Aus)

Wenn sich beim 'sliden' der Bilder Artefakteffekte zeigen, kann mit (Ein) ein sich
wiederholendes Punktemuster 'über' das Bild gelegt werden.

Es kann mit der nächsten Option zwischen 9 solcher Muster gewählt werden.

Overlay Bild (Ziffer 1 - 9)

Es sind 9 verschiedene Punktemuster für das Overlay verfügbar. Hier kann das passende Muster aktiviert werden.

Höhe des Slider (In Prozent)

Die initiale Höhe von 30 Prozent kann hiermit geändert werden.

Pause bis Slidewechsel (Millisekunden)

Die Zeit, die das aktuelle Bild nach Ablauf des Überganges (Transition) und seiner Animation,
vor dem Wechsel zum nächsten Bild noch ruhig stehen bleibt.

Dauer der Animation (Millisekunden)

Zeitdauer der Animation.

Dauer der Umwandlung (Millisekunden)

Zeitdauer für den Übergang vom vorigen Bild zum aktuellen Bild

Einstellungen je Slide

Bild

Ein Bild aus dem Bildverzeichnis.

Transition

Auswahl des Bildüberganges. Details: http://vegas.jaysalvat.com/documentation/transitions/

Animation

Animation des neuen Bildes. Details http://vegas.jaysalvat.com/documentation/transitions/

Titel

Für jedes Bild kann ein Titel eingeblendet werden. Er erscheint in der linken oberen Ecke des Bildes

Text

Wie bei Titel. Erscheint unterhalb des Titels im Bild.

Link

Ein Hyperlink. Wird in einem neuen Fenster geöffnet

Linkbeschreibung

Der angezeigte Text für den Hyperlink in 'Link'

Textanimation

Titel und Text können animiert angezeigt werden. Hier die Auswahl aus aktuell 5 Möglichkeiten.
Mit der Auswahl 'none' wird nichts animiert.

Verz. Textanimation (Millisekunden)

Zeit zwischen dem Erscheinen des Bildes und dem Erscheinen des Titels und Text.

Ich wünsche viel Freude mit dem Modul.

Edit: Der Fehler mit dem Zeichen ' ist behoben. Es sind jetzt auch Links möglich.

Beste Grüße
klawin

Beitrag geändert von klawin (12.02.2021 23:39:49)

florian, byteworker, screamindan, selle, bodo, thanks, awuest

florian · 12.02.2021 19:03:57

Schönes Ding!
Zwei Anmerkungen:
- Ein ' im Titel oder Text mag der Slider nicht
- Die Möglichkeit, jeweils noch einen Link zu hinterlegen, wäre noch top

klawin · 12.02.2021 19:55:02

florian schrieb:

Schönes Ding!

Danke sehr.

- Ein ' im Titel oder Text mag der Slider nicht
- Die Möglichkeit, jeweils noch einen Link zu hinterlegen, wäre noch top

Ok. Ich schaue mal.

klawin · 12.02.2021 22:48:44

Guten Abend florian

florian schrieb:

- Ein ' im Titel oder Text mag der Slider nicht
- Die Möglichkeit, jeweils noch einen Link zu hinterlegen, wäre noch top

Das mit dem ' ist bereinigt. Die Möglichkeit für einen Link ist drin.

Ich habe den ursprünglichen Beitrag geändert und eine neue Version angehangen.

Viele Grüße
klawin

florian · 13.02.2021 09:55:20

Hervorragend, vielen Dank.

klawin

florian · 14.02.2021 08:30:04

Ist jetzt im AOR:
https://addons.wbce.org/pages/addons.ph … m&item=153

klawin, byteworker, screamindan

selle · 11.03.2021 13:20:37

Guten Tag und herzlichen Dank für den unermüdlichen Einsatz :-)

Frage: Ich habe das Modul installiert und auf einer Testseite eingefügt. Die Bilder werden auch angezeigt. Soweit gut. Wenn ich allerdings auf eines der Steuerelemente klicke oder gar auf das Bild für Stopp/Start, lande ich auf der Startseite der Homepage. Woran könnte dieser Effekt liegen?

Gäbe es auch eine Möglichkeit, anstatt Bilder aus dem vslider-Verzeichnis auch aus einem frei definierbaren Verzeichnis auszuwählen, sowie die Anzeigegröße in Höhe UND Breite zu definieren? Das würde die ganze Sache sehr flexibel machen ;-)

Sorry, falls meine Vorstellung zu weite gehen, aber ich habe leider keine Ahnung von Programmierung...

Danke herzlichst fürs Lesen und ggf. Antworten!
Gruß Stefan

Beitrag geändert von selle (11.03.2021 13:29:26)

klawin · 11.03.2021 19:42:28

Guten Abend Stefan,

...oder gar auf das Bild für Stopp/Start, lande ich auf der Startseite der Homepage. Woran könnte dieser Effekt liegen?

Der 'Link' ist ein handelsübliches href="# " für eine Sprungmarke, welches auf die aktuelle Seite, also auf die .../pages/testseite.php, gehen sollte.

Warum er es gerade bei Dir nicht tut, sondern stattdessen tatsächlich auf die Startseite verweist, ist mir noch ein Rätsel.

Schau es Dir bitte mal auf meiner Testseite für das Modul: https://klawinver.klawinit.de/pages/mod … slider.php an. Es sind auch zwei Abschnitte, wie bei Dir. Einmal WYSIWYG und danach das Modul. Dort werden die Links wie erwartet gesetzt.

Hast Du es schon mal mit einem anderen Template probiert? Ist da dieser Link auch so 'falsch'?

Gäbe es auch eine Möglichkeit, anstatt Bilder aus dem vslider-Verzeichnis auch aus einem frei definierbaren Verzeichnis auszuwählen...

Ein frei wählbares Verzeichnis für das Modul oder für jede Sektion frei wählbar?

... ,sowie die Anzeigegröße in Höhe UND Breite zu definieren?

Der Slider selber ist ein bischen 'zickig' wenn die Breite 'seines' Containers beschnitten wird. Daher auch die Vorgabe mit 100%. Aber ich habe dazu schon eine Idee, wie es mit der Begrenzung der Breite doch klappen könnte. Dauert aber noch...

Beste Grüße
klawin

selle

selle · 11.03.2021 20:19:03

Hallo klawin,

herzlichen Dank für deine Antwort.

Mit einem anderen Template funktioniert das Ganze, so wie es soll. Da muss ich wohl mal einen Experten an das Template lassen, denn ich kenne mich da nicht gut genug aus, um diesem Fehler auf die Schliche zu kommen. Ich betreue die Webseite der Schule als ehrenamtlicher Mitarbeiter (Ehemann einer Lehrerin ;-)).

Was das Verzeichnis angeht, wäre ein frei wählbares Verzeichnis für jeden eingesetzten Slider toll.

Leider zeigt er Bilder, die kleiner als der Container sind, auch vergrößert und größere beschnitten an. Deshalb meine Frage nach der definierten Größe ;-)

Ach wenn ich das doch auch könnte ...

Danke für deine Mühen!
Gruß Stefan

klawin · 12.03.2021 02:00:30

Guten Morgen,

selle schrieb:

Mit einem anderen Template funktioniert das Ganze, so wie es soll.

Sehr gut. Danke für den Test. Auch gut, dass Du das Template jetzt 'reparieren' lässt. Dann gehen später die Sprungmarken auch korrekt.
Unabhängig davon, habe ich jetzt die Vorgehensweise für den Slider geändert. Er benutzt nun keine Sprungmarken mehr, sondern erzeugt die Links auf eine andere Weise. Die sollte dann hoffentlich auch mit Deinem Template funktionieren.

selle schrieb:

Was das Verzeichnis angeht, wäre ein frei wählbares Verzeichnis für jeden eingesetzten Slider toll.

Habe ich jetzt so umgesetzt. Du kannst pro Sektion ein eigenes Unterverzeichnis aus dem Mediaverzeichnis auswählen. Bitte nicht mehr verstellen wenn Du schon Bilder ausgewählt hast. Oder vorher die ausgewählten Bilder in das neue Verzeichnis kopieren :-)

selle schrieb:

Leider zeigt er Bilder, die kleiner als der Container sind, auch vergrößert und größere beschnitten an. Deshalb meine Frage nach der definierten Größe ;-)

Der Vegas-Slider lässt sich da leider nicht überlisten. Da konnte ich nichts ändern. Er breitet sich immer im vollen Umfang im angebotenen Kontext aus. Bedeutet, er ist immer so breit wie der Bereich, den das Template für die Ausgabe des Inhaltes vorgibt. Lediglich die Höhe ist definierbar.
Was die Bilder betrifft: Er nutzt die Option, die Bilder an die Bereichsgröße anzupassen. Im Zweifel musst Du also die Bilder in der von Dir gewünschten Größe bereitstellen.

Anbei findest Du die modifizierte Version. Einfach über das Backend installieren. Es wird dann ein Update ausgeführt.

Bitte gib mir eine kurze Rückmeldung, ob das mit den Links nun bei Deinem Template funktioniert.

Viele Grüße
Klawin

Beitrag geändert von klawin (12.03.2021 02:00:48)

selle

selle · 12.03.2021 15:39:38

Hallo Klawin,

RESPEKT! Das funktioniert schon mal erstklassig (Klick) - auch in meinem Template (lass ich trotzdem mal überarbeiten) smile
Dass der Container nicht weiter spezifiziert werden kann, ist nicht tragisch - man kann die Bilder ja anpassen, wie du schon schreibst.
Die Auswahl eines Unterverzeichnisse in Media klappt auch perfekt thumb_up ... Bestünde nun noch die Möglichkeit, alle Bilder des ausgewählten Verzeichnisses gleich zu übernehmen, OHNE sie expliziert auswählen zu müssen? Ich bin mir der Tatsache wohl bewusst, dass ich hier Wünsche äußere, für die andernorts Geld bezahlt werden muss!!! Also VIELEN DANK für deine Mühen und deine Bereitschaft, Anpassungen vorzunehmen big_smile Klasse!

Beste Grüße aus Sachsen
Stefan

P.S: Liese sich Start/Stop mit in die Steuerelemente-Leiste integrieren? wink

Beitrag geändert von selle (12.03.2021 15:46:12)

klawin

klawin · 13.03.2021 16:18:13

Anbei eine neue Version (1.0.3) des Moduls.

Das ist Neu:

Verschieben der Bilder in der Listenübersicht mit 'Drag & Drop'. Endlich keine 'Rauf-und-Runter' - Buttons mehr
'Pause/Play' - Button in der Navigationsleiste
Abgleich der Bilderliste mit den Bildern aus dem ausgewählten Verzeichnis bei den Einstellungen:
- Es werden die Bilder eingetragen, für die es bisher keinen Eintrag gab.
- Optional können 'verwaiste' Einträge gleich mit entfernt werden.

Viele Grüße
klawin

Beitrag geändert von klawin (13.03.2021 17:07:42)

byteworker, florian, ice, selle, bodo, thanks

selle · 14.03.2021 11:44:12

Moin klawin,

GENIAL! Herzlichen Dank dafür - ich weiß das sehr zu schätzen!!! Sogar mehr als ich zu hoffen gewagt habe - Daaaaanke!

Die Überarbeitung des Templates ist auch in Auftrag gegeben, wird aber leider noch etwas auf sich warten lassen, aber das macht nichts, da du so (für mich) perfekte Arbeit geleistet hast - ich freu mich wink

Einen schönen Sonntag - you made my day!
Gruß Stefan

klawin

bodo · 17.03.2021 19:11:56

Hallo Klawin,

vielen Dank für den VegaSlider. Alles drin, was man für einen Slider braucht. Funktioniert super. thumb_up
........................................................................
Falls dennoch Ideen eingebracht werden können (die grundsätzlich nicht wichtig sind), könnte ich mir vorstellen, dass noch die Möglichkeit geschaffen wird, Position von Titel und Text optional anpassen zu können. Also ich meine Abstand links / rechts / oben in % oder px und vielleicht auch noch für den Text die Option "zentrieren". Ich hoffe, dass ich das nicht übersehen habe und vielleicht schon drin ist roll Wie gesagt, nur ein Gedanke, der mit der Funktionalität nichts zu tun hat.

Beste Grüße
Bodo

klawin

klawin · 17.03.2021 19:53:46

Hallo Bodo,

bodo schrieb:

... Position von Titel und Text optional anpassen zu können. Also ich meine Abstand link...

Du kannst diese Eigenschaften (Definiert in der frontend.css) durch eine entsprechende Definition in Deiner template.css anpassen (überschreiben). Das geht für jeden Slider individuell weil Du auf die Section-ID verweisen kannst.

Ein Beispiel für die Änderung der Hintergrundfarbe steht ganz unten in der README.

 
### Ueberschreiben der Styles je Sektion

  Die in frontend.css definierten Werte koennen fuer jede Sektion 
  im template.css individuell ueberschrieben werden. 

  Beispiel fuer die Sektion 413:
  
  #vslider-413 .vslider_inner { 
    background: rgba(255,215,0,0.5);
  }

Für die von Dir gewünschten Werte dann sinngemäß.

Schau einfach nach, was über die frontend.css definiert wird und überschreibe es entsprechend.

Du kannst die Section_ID entweder im Backend oder auch im Quellcode der jeweiligen Seite ermitteln.

Viele Grüße
klawin

bodo, byteworker, bastie

bodo · 18.03.2021 00:04:03

Hallo Klawin, na damit ist ja diese Kleinigkeit auch vom Tisch und wenn es dann für jeden Slider getrennt machbar ist, kann ich nichts mehr sagen. Alles super. Danke.

LG
Bodo

byteworker · 09.04.2021 16:00:45

Ich habe den Vegasslider bisserl per css angepasst:

https://www.korloyeurope.eu/pages/de/startseite.php

florian, bodo, klawin, screamindan

screamindan · 10.04.2021 11:02:03

Sehr coole Seite. Am Handy is die Überschrift wohl zu breit; is n ziemlich langes Wort auch.

byteworker · 10.04.2021 12:15:13

Ja die Headlines, ich mache die Seite für unsere Marketingleute, die haben auch alle supergroße Monitore. Da kann alles nicht groß genug sein. Werde vermutlich ein Style für Smartphones einfügen müssen.

byteworker · 14.04.2021 09:57:06

Eine Frage habe ich noch zur Navigation im Slider: ist es möglich, diese kleinen runden Buttons unterhalb des sliders einzubinden?

https://www.korloyeurope.eu/pages/de/startseite.php

Wie auf der Homepage WBCE

klawin · 14.04.2021 21:05:56

byteworker schrieb:

Eine Frage habe ich noch zur Navigation im Slider: ist es möglich, diese kleinen runden Buttons unterhalb des sliders einzubinden?...

Eine solche Änderung ist leider nicht trivial und sehr aufwändig.

Für diese Art der Navigation sollte man besser direkt das OwlCarousel nutzen.

Viele Grüße
klawin

byteworker

cyberdyne · 01.05.2021 13:37:05

Hallo,
ließe sich der VegasSlider im Template Fragstan auf der Startseite als Hintergrund für das Parallax-Element einsetzen/ ersetzen?

Viele Grüße & allen einen schönen 1. Mai,
Klaus

florian · 01.05.2021 15:26:25

Ja, Du brauchst den VSlider-Abschnitt einfach nur dem Template-Block "Replace Header" zuzuweisen.

klawin

cyberdyne · 01.05.2021 18:00:54

florian schrieb:

Ja, Du brauchst den VSlider-Abschnitt einfach nur dem Template-Block "Replace Header" zuzuweisen.

Hi,
vielen Dank für die schnelle Antwort. Ich dachte an den VegasSlider inkl. der Parallax-Startseite unter Fragstan. Wobei der Parallax-Effekt dann nicht möglich sein wird, der Verzicht zugunsten des Sliders aber zu verschmerzen wäre.

Grüße,
Klaus

florian · 01.05.2021 18:45:46

Theoretisch müsste dann im Template die if/else- Anweisung rausgenommen werden, also dass Replace Header dann eben nicht den Header replacet, sondern darunter erscheint.
Oder du legst sowohl einen Minihero- als auch Vegasslider-Abschnitt ins (unveränderte) Template in Replace Header, das kannst Du auch noch probieren.
Frage iat allerdings, ob das gut aussieht oder nicht zu viel an Bildern ist.

Beitrag geändert von florian (01.05.2021 18:46:47)

WBCE CMS Forum

#1 12.02.2021 17:39:22