MultiMediaSlider - Fotorama für CMSimple

[Gert]

Das Plugin MultiMediaSlider, das Fotorama für CMSimple bereitstellt, stand ja nun einige Jahre auf der Abschussliste, weil Fotorama jQuery benötigt und ich jQuery eigentlich loswerden will. Aber da ist ja noch das Standard-Plugin Pagemanager, das auf dem jQuery Plugin jsTree beruht. Der Pagemanager funktioniert hervorragend, und so bin ich viel zu faul, einen neuen Pagemanager zu programmieren, der kein jQuery benötigt.

Und so gibt es ein jQuery 3.0.0 für den Pagemanager (jquery_cmsimplecore.js), und damit funktioniert auch Fotorama. Sowohl jsTree als auch Fotorama werden seit vielen Jahren nicht mehr aktualisiert und brauchen somit auch kein jQuery grösser 3.0.0. Wenn jemand unbedingt ein Plugin betreiben will, das jQuery höher als 3.0.0 braucht, muss er selbst dafür sorgen, dass sein benötigtes jQuery geladen wird. CMSimple jedenfalls unterstützt jQuery nicht mehr und ist somit vor Überraschungen aus dieser Ecke geschützt.

Und somit sieht es nun wieder gut aus für den MultiMediaSlider, Fotorama wird seit mehr als 10 Jahren nicht mehr weiterentwickelt, die aktuelle Version 4.6.4 ist aus 2015. Von da her sind also auch keine Überraschungen mehr zu befürchten, jQuery 3.0.0 bleibt für den Pagemanager Bestandteil von CMSimple, und solange wird auch das Plugin MultiMediaSlider laufen.

Also habe ich mich mal wieder mit dem MultiMediaSlider beschäftigt, und dabei sind mir 2 Dinge aufgefallen:

1. Fotorama bietet keine Funktion, die die Slideshow bei mouseover unterbricht und bei mouseout wieder aktiviert. Es gibt nur stopautoplayontouch, und mouseover wird nicht als touch gewertet. Ein Klick auf den Slider oder auf ein Vorschaubild unterbricht die Slideshow, und sie kann nur durch ein Neuladen der Seite mittels Browser-Button wieder gestartet werden. Da muss man selbst drauf kommen, Fotorama bietet dafür keinen Button an.

Es gibt aber JavaScript Lösungen, die eine Unterbrechung der Slideshow bei mouseover und eine Fortsetzung bei mouseout bewirken.

2. Die Pfeile für das vorige und das nächste Bild sind im Original sehr prominent und somit nach meiner Auffassung störend platziert. Diese Buttons und der Vollbild Button haben ausserdem einen neutralen Hintergrund und sind bei manchen Bildern schlecht zu sehen, deshalb habe ich ein wenig mit dem CSS herumgespielt.

-----------------------------------

Da ich keine neue Version herausbringen möchte, ohne dass diese Probleme und deren Lösungen hier diskutiert wurden, habe ich ein paar Seiten in meiner CMSimple Demo angelegt, mit 2 Demoseiten und 2 Seiten mit den Codes für JavaScript und CSS:

https://www.ge-webdesign.de/demotpl/?Ti ... ediaSlider

Meine Fragen sind:

1. Findet Ihr das Originalverhalten von Fotorama zur Unterbrechung der Slideshow besser, oder mouseover / mouseout?

2. Wie findet Ihr die Anordnung der Pfeile für das vorige und das nächste Bild unten links und unten rechts?

Viel Spass - Gert

[Gonzo Gates]

Hallo Gert,

als Erstes: Eigendlich brauche ich den MultiMediaSlider nicht und ich weiß auch nicht, ob ich ihn mal getestet habe. Über jQuery hatten wir uns auch mal kurz unterhalten und bei ist V4.0.0 aktiv. Übrigens benutze ich jQuery für meinen Titelumschalter, wenn ein CMSimple-Tab im Browser inaktiv ist. Da steht dann im 2 Sekundentakt wechselnd:"Zurück zu..." - "${Seitentitel}" - "Mach schon!!!". Ist nur eine Spielerei.

Zur Demoseite 'Stop durch Aktion - das Standardverhalten': Vieleicht habe ich was am Auge, aber in der Slideshow kann ich oben links einen 'Play-Button' sehen, auf den ich klicken kann, damit die Show wieder beginnen kann. Hast du den nachträglich eingefügt? Sieht auch so aus, dass dieser einen Reload der Seite macht. In der 'Vergrößern'-Ansicht ist er nicht mehr vorhanden und die Show steht dann auch still. Nix Slider. Per Sitenreload im Broser kommt man wieder zur Gesamtseitenansicht zurück.

Zur Demoseite 'Stop durch mouseover': Als ich dein NewsTicker-Plugin ausprobiert hatte (Gebrauche ich jetzt nur noch in meiner Testsubsite unterhalb einer Gallerie), fand ich es gut, dass man den Tickertext mit mouseover anhalten kann. Das kann ich auch auf deine Veränderung im MultiMediaSlider übertragen. Mir gefällt es, denn dann muss man nicht mehr auf 'Play' klicken. Aber: Wenn auf 'Vergrößern' oben rechts geklickt wird, dann reicht es nicht den Mauszeiger nach unten auf die Thumbnails zu ziehen, sondern man muss den Zeiger aus dem Browserfenster herausziehen, damit die Show weiter geht. Per Sitenreload im Broser kommt man wieder zur Gesamtseitenansicht zurück oder man nimmt den 'Minimieren'-Button.

Unterm Strich: Stop mit mousover finde ich besser oder wie meine Frau manchmal sagt: guter (Weil sie es als Kleinkind so gesagt hatte). Zu den Pfeilen: Ich denke, dass eine Anordnung mittelinks und mitterechts besser wäre ( Dann wohl /*top: auto!important;*/ bottom: auto!important;), denn, nehmen wir an, dass der Mauszeiger rel. mittig positioniert ist, ein diagonaler Weg länger ist, als ein horizontaler. Das sehe es vor dem Hintergrund so, dass nicht alle Benutzer ihre Mausgeschwindigkeit auf AK konfiguriert haben, so wie ich. Und die Knöppies könnten etwas größer sein.

Gruß
Gonzo

[Gert]

Zur Demoseite 'Stop durch Aktion - das Standardverhalten': Vieleicht habe ich was am Auge, aber in der Slideshow kann ich oben links einen 'Play-Button' sehen, auf den ich klicken kann, damit die Show wieder beginnen kann. Hast du den nachträglich eingefügt?

Hallo Gonzo, ja, das war ein erster Versuch, dem Besucher etwas anzubieten, womit er die Slideshow wieder in Gang bringen kann. Inzwischen bin ich da etwas weiter gekommen:

https://www.ge-webdesign.de/demotpl/?Ti ... op_Buttons

Sieht auch so aus, dass dieser einen Reload der Seite macht. In der 'Vergrößern'-Ansicht ist er nicht mehr vorhanden und die Show steht dann auch still. Nix Slider. Per Sitenreload im Broser kommt man wieder zur Gesamtseitenansicht zurück.

Genau das sind so die Ungereimtheiten beim Standardverhalten. Das Klicken auf den Fullsize Button ist eine Aktion, die Slideshow stoppt also. Jetzt müsste ich die Seite neu laden, um die Slideshow wieder zu starten, lande dann aber wieder auf der Website. Die automatisch Slideshow funktioniert also nur in der mouseover Variante, ansonsten ist die Fullsize Ansicht nur zum Betrachten einzelner Bilder in gross da.

Ich finde die mouseover Variante auch am bequemsten, es gibt aber auch die Ansicht, dass sich auf einer inhaltsorientierten Website nichts bewegen soll, was nicht vom Besucher ausgelöst wird, wegen der Ablenkung vom wesentlichen.

Mal sehen, was mir noch so einfällt

Gert

[Gonzo Gates]

Hallo Gert,

zu deiner oben genannten Demo: Wenn ich den Slider starte, wenn ich auf 'Play' klicke, dann geht es los. Klicke ich auf ein Bild, dann erscheint sofort das nächste Bild. Dann ruht aber erstmal der Slidersee still, bis ich wieder auf 'Play' klicke.

Wenn jemand meint, dass er ein sofortiges Sliden der Bilder beim Aufruf seiner Seite nicht möchte, weil er meint, dass es störend für seinen Seiteninhalt ist, dann sollte dieser Jemand MultiMediaSlider so konfigurieren, dass es nicht passiert. Wenn das nicht möglich ist, dann könnte dieser Jemand einen Hinweistext in die Seite schreiben wie:"Wenn du hier keine Slideshow haben willst, dann klicke auf das Bild und beruhige dich." oder er bindet eine FotoPro Gallerie in die Seite ein. Dann ist Ruhe.

Aus meiner Sicht ist MultiMediaSlider dafür gedacht seine photografischen Eindrucke von Gegenden, in denen man war, Erignisse, die man Erlebt hat oder mein Auto, dass ich verkaufen möchte zu schildern. Da kann die Show auch mal sofort losgehen, wenn der Eingangstext stimmig ist

Ein Stück weit hast du Recht, denn wenn ich irgendwo ewas lese und eine Animation ist in den Text eingebunden, dann scrolle ich den Inhalt so hin, dass mich dieses 'Geflimmere' nicht nervt.

Gruß
Gonzo

[Gert]

Wenn ich den Slider starte, wenn ich auf 'Play' klicke, dann geht es los. Klicke ich auf ein Bild, dann erscheint sofort das nächste Bild.

Oder das vorige, je nach dem, wo Du hinklickst. Du kannst Dir auch eines aus den Vorschaubildern aussuchen, und wer das aktuelle Bld länger sehen will, nimmt den Stop-Button.

Dann ruht aber erstmal der Slidersee still, bis ich wieder auf 'Play' klicke.

So soll es sein. Wer in den Slider eingreift, will ihn normalerweise anhalten, um sich ein Bild genauer anzusehen, egal ob er das vorige oder das nächste Bild aufruft oder sich eines aus den Vorschaubildern aussucht. Kann man aber auch anders konfigurieren (data-stopautoplayontouch="false").

Ist halt wie bei einem Video, das kann man auch auf Autoplay konfigurieren oder nicht, und wenn man reinklickt, hält es an,

Gert

[Gert]

Hallo,

ich bin erstaunt über das überwältigende Interesse

Naja, immerhin hat einer mal drübergeschaut, ausgerechnet einer der dieses Plugin gar nicht verwendet und auch nicht braucht - vielen Dank an Gonzo für das Feedback

Die Pfeile sind jetzt wieder auf halber Höhe, war auch nur so eine Idee in jeder Ecke was zu haben, als ich links oben den ersten Startbutton platziert hatte. Jetzt gibt es ja die "Controlbar" ausserhalb des Sliders, mit Start- und Stopbutton. Inzwischen kann man damit mehrere Slider auf einer Seite unabhängig voneinander steuern:

https://www.ge-webdesign.de/demotpl/?Ti ... iner_Seite

Die Slider sind unterschiedlich konfiguriert und unterschiedlich gestaltet. Nur vorsorglich für Gonzo: Das ist eine Demo, auf einer produktiven Website würde man das natürlich nicht so machen, da würden zumindest alle Slider auf autoplay="false" gesetzt

Eigentlich wollte ich an der fotorama.js möglichst nichts ändern, aber dann würde der Startbutton die Slideshow bei allen Slidern mit Controlbar mit den gleichen Intervallen starten, und ändern könnte man das nur durch bearbeiten der fotorama.js, und das wäre wenig komfortabel. Also habe ich eine neue Konfigurationsvariable autoplaystartbutton eingeführt.

Jetzt kann man das für jeden einzelnen Slider anders konfigurieren. So sieht das dann aus, wenn der Slider nicht automatisch starten soll:

Code: Select all

...
data-autoplay="false" 
data-autoplaystartbutton="2500" 
...

Bei einem Script, das seit mehr als 10 Jahren kein Update mehr hatte, kann man wohl davon ausgehen, dass es keine Updates mehr geben wird. Da kann man dann eigentlich ganz beruhigt drin rumkritzeln. Allerdings werde ich hier wohl kein eigenes Projekt anfangen wie bei Shutter Reloaded. Die Downloadzahlen von Shutter Mobile zeigen mir, dass es den Aufwand nicht lohnt.

Nun wird es also kein Addon für den MultiMediaSlider geben, sondern eine neue Version, irgendwann, es scheint ja nicht zu eilen

Gert

[Hixi]

Hallo Gert
Da wir in der Toskana im Urlaub waren, kamen wir erst jetzt dazu, den MultiMediaSlider zu testen. Wir haben ihn auf verschiedenen Seiten im Einsatz und wären sehr an der neuen Version interessiert .
mouseover / mouseout finden wir besser als das Original-Verhalten. Die Pfeile in der Mitte finden wir gut.
Wir haben den Multimedia-Slider auf einer Seite mit dem Template transparency2026wideSidebarLeft getestet. Hier fällt auf, dass der MultiMediaSlider nicht bei allen Galerien funktioniert:
Hier nicht: https://cococrackers.ch/_test/?Willkommen
Hier schon: https://cococrackers.ch/_test/?Fotos___ ... g_Willisau
Wenn man den Code für den MultiMediaSlider löscht, funktioniert die Seite. Auf Mobile-Geräten funktioniert alles.
Vielleicht liegt das am Template - oder an uns?
Vielen Dank für deine Arbeit und sonnige Grüsse aus der Schweiz
Beat + Susanne

[Gert]

Hallo,

vielen Dank für's testen. Ich wusste ja, dass Ihr Fans vom MultiMediaSlider seid und habe schon auf Euch gewartet

Was mir gleich aufgefallen ist, als ich mir Eure Seite im Quelltext angesehen habe: Da ist an einer Stelle hinter dem true ein falsches doublequote, seht Ihr das? Das scheint das deutsche "obere Gänsefüsschen" zu sein (mittlere Zeile, Willisau Seite):

Code: Select all

...
data-thumbfit="contain" 
data-allowfullscreen="true“
data-keyboard="true" 
...

Wo habt Ihr denn das Script eingefügt? Seite, template.htm oder fotorama.js? Ich kann es nicht entdecken, und "stop by mouseover" funktioniert bei beiden Links nicht.

Wenn Ihr es am Ende der fotorama.js angehängt habt, dann müsst Ihr das ohne die script- und div Tags am Anfang und am Ende machen, und im Inhalt in der Quelltextansicht,

Gert

PS: Habe es jetzt auch in dem erwähnten Template getestet - daran liegt es nicht.

[Gert]

HEUREKA

Code: Select all

...
data-width="100%" 
...
data-fit="scaledown"
...

Zumindest verursacht bei mir data-fit="contain" das gleiche Problem wie bei Euch, ich kann das aber auch ganz weglassen, dann funktioniert es bei mir auch,

Gert

[Hixi]

Bei einer Auflösung von 1250px funktioniert es nur bis data-width 70%.
Jetzt gehen wir auf eine Fahrrradtour, um die Köpfe auszulüften...