WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 12.02.2021 17:39:22

klawin
Member

VegasSlider (vslider)

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

Last edited by klawin (12.02.2021 23:39:49)


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

Liked by:

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

#2 12.02.2021 19:03:57

florian
Administrator

Re: VegasSlider (vslider)

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


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 12.02.2021 19:55:02

klawin
Member

Re: VegasSlider (vslider)

florian wrote:

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.


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

#4 12.02.2021 22:48:44

klawin
Member

Re: VegasSlider (vslider)

Guten Abend florian

florian wrote:

- 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


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

#5 13.02.2021 09:55:20

florian
Administrator

Re: VegasSlider (vslider)

Hervorragend, vielen Dank.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

klawin

#6 14.02.2021 08:30:04

florian
Administrator

Re: VegasSlider (vslider)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

klawin, byteworker, screamindan

#7 11.03.2021 13:20:37

selle
Member

Re: VegasSlider (vslider)

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

Last edited by selle (11.03.2021 13:29:26)


"Gras wächst auch nicht schneller, wenn man daran zieht..."

Offline

#8 11.03.2021 19:42:28

klawin
Member

Re: VegasSlider (vslider)

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


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

Liked by:

selle

#9 11.03.2021 20:19:03

selle
Member

Re: VegasSlider (vslider)

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


"Gras wächst auch nicht schneller, wenn man daran zieht..."

Offline

#10 12.03.2021 02:00:30

klawin
Member

Re: VegasSlider (vslider)

Guten Morgen,

selle wrote:

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

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

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

Last edited by klawin (12.03.2021 02:00:48)


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

Liked by:

selle

#11 12.03.2021 15:39:38

selle
Member

Re: VegasSlider (vslider)

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

Last edited by selle (12.03.2021 15:46:12)


"Gras wächst auch nicht schneller, wenn man daran zieht..."

Offline

Liked by:

klawin

#12 13.03.2021 16:18:13

klawin
Member

Re: VegasSlider (vslider)

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 smile

  • '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

Last edited by klawin (13.03.2021 17:07:42)


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

Liked by:

byteworker, florian, ice, selle, bodo, thanks

#13 14.03.2021 11:44:12

selle
Member

Re: VegasSlider (vslider)

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


"Gras wächst auch nicht schneller, wenn man daran zieht..."

Offline

Liked by:

klawin

#14 17.03.2021 19:11:56

bodo
Member

Re: VegasSlider (vslider)

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

Offline

Liked by:

klawin

#15 17.03.2021 19:53:46

klawin
Member

Re: VegasSlider (vslider)

Hallo Bodo,

bodo wrote:

... 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


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

Liked by:

bodo, byteworker, bastie

#16 18.03.2021 00:04:03

bodo
Member

Re: VegasSlider (vslider)

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

Offline

#17 09.04.2021 16:00:45

byteworker
Member

Re: VegasSlider (vslider)

Ich habe den Vegasslider bisserl per css angepasst:

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

Online

Liked by:

florian, bodo, klawin, screamindan

#18 10.04.2021 11:02:03

screamindan
Member

Re: VegasSlider (vslider)

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

Offline

#19 10.04.2021 12:15:13

byteworker
Member

Re: VegasSlider (vslider)

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.

Online

#20 14.04.2021 09:57:06

byteworker
Member

Re: VegasSlider (vslider)

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

Online

#21 14.04.2021 21:05:56

klawin
Member

Re: VegasSlider (vslider)

byteworker wrote:

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


Egal wie du es machst, du machst es falsch! Also mache es!

Offline

Liked by:

byteworker

#22 01.05.2021 13:37:05

cyberdyne
Member

Re: VegasSlider (vslider)

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


Macht's gut und danke für den Fisch!

Offline

#23 01.05.2021 15:26:25

florian
Administrator

Re: VegasSlider (vslider)

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


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

klawin

#24 01.05.2021 18:00:54

cyberdyne
Member

Re: VegasSlider (vslider)

florian wrote:

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


Macht's gut und danke für den Fisch!

Offline

#25 01.05.2021 18:45:46

florian
Administrator

Re: VegasSlider (vslider)

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.

Last edited by florian (01.05.2021 18:46:47)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Board footer

up