MultiMediaSlider - Fotorama für CMSimple

[Gert]

Hallo,

es scheint nun doch so zu sein, dass es am Template liegt. Fotorama hat Probleme, sich an diesen flexiblen Inhaltsbereich anzupassen.

Versucht doch bitte mal folgendes: Sucht in der stylsheet.css des Templates nach ".tplge_content {flex: 1 0 900px; order: 2;" und hängt noch ein "overflow: hidden;" ran, dann kann Fotorama den Inhaltsbereich nicht mehr sprengen:

Code: Select all

.tplge_content {flex: 1 0 900px; order: 2; overflow: hidden;}

Bei mir hat das geklappt, auch mit data-width="100%" und "stop by mouseover":

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

Ich habe jetzt auch zum ersten mal mit so grossen Bildern getestet, sowas stelle ich normalerweise nicht online,

Gert

[Hixi]

Hallo Gert
Vielen Dank fürs Klären und den Hinweis. So klappt es. Wir werden jetzt noch ein bisschen mit dem Template "herumspielen". Vielleicht setzen wir dann die Seite damit um.
Sonnige Grüsse, Beat + Susanne

[Gert]

Hallo Ihr Zwei,

schön, dass wir das Problem lösen konnten.

Ich bin ja nicht so der Fan von Fotorama, weil da so ein grosses Element erzeugt wird. Bei 16:9 geht es noch, bei 4:3 ist dann das Bild schnell mal zu hoch und passt nicht in den Browser. Ich habe dafür eine Lösung gefunden, in der stylesheet.css des Plugins (bei mir ganz oben):

Code: Select all

@media (min-width: 1000px) {
.mmsl_container {width: 67%; margin: 16px auto;}
}

Die Klasse mmsl_container kann ich nun dem den Pluginaufruf umgebenden div zuordnen, oder ich verwende sie in der Sliderdatei:

Code: Select all

<div class="fotorama mmsl_container" 
data-width="100%" 
...

oder noch ein extra div um das ganze drumrum:

Code: Select all

<div class="mmsl_container">
<div class="fotorama"
data-width="100%" 
...
</div>

So funktioniert das dann: Der Slider ist ab 1000px horizontaler Auflösung 1/3 kleiner, bei weniger horizontaler Auflösung (das sind meist Tablets oder Smartphones, die man schnell mal in die Senkrechte drehen kann) hat er wieder 100%. Einfach mal das Fenster schmal ziehen:

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

Nur so eine Idee

Ein anderes Problem:

Der neue MultiMediaSlider wird 2 Funktionen mitbringen, controls_by_class und mouseover_by_class. Beide funktionieren nur wenn dem Slider in der Sliderdatei eine bestimmte Klasse zugeordnet wird, ansonsten funktioniert der Slider wie vorher. Da müsstet Ihr dann noch einmal durch alle Slider und die Klasse control_mouseover hinzufügen, damit die Slider bei mouseover stoppen und bei mouseout weiterlaufen. Das wäre ja bei Euch 'ne Menge Arbeit

Code: Select all

// vorher:
<div class="fotorama" 
data-width="100%" 
...

// nachher:
<div class="fotorama control_mouseover" 
data-width="100%" 
...

Deshalb habe ich nun eine dritte Funktion hinzugefügt: stop_all_sliders_by_mouseover. Diese Funktion kann man in der Plugin Konfiguration aktivieren, und wenn die aktiviert ist, werden die beiden anderen Funktionen automatisch deaktiviert, damit es keine Konflikte gibt. Wenn Ihr also diese Funktion aktiviert, stoppen alle Slider bei mouseover und laufen bei mouseout weiter, ohne dass Ihr noch irgendwas anderes tun müsst.

Ich nenne das intern die "Hixi Funktion"

Gert

[Hixi]

Hallo Gert
Vielen Dank! Wir haben den Code in der Galerie auf der Startseite eingefügt. Nun wäre es schön, wenn die Fotos nicht zentriert, sondern linksbündig angezeigt würden, oder was meinst du? Wenn wir das im Stylesheet des Plugins ändern würden, wäre es aber wohl nicht Update-sicher, oder?
Wie müssen/können wir die Funktion "stop_all_sliders_by_mouseover" einfügen?
Ach, übrigens: "Mouseover" passt perfekt zur "Hixi"-Funktion: Eine unserer ehemaligen Katzen hiess Hixi
Beat + Susanne

[Gert]

Nun wäre es schön, wenn die Fotos nicht zentriert, sondern linksbündig angezeigt würden

Code: Select all

@media (min-width: 1000px) {
.mmsl_container {width: 75%; margin: 16px auto 16px 0;}
}

Das margin macht es.

Wenn wir das im Stylesheet des Plugins ändern würden, wäre es aber wohl nicht Update-sicher, oder?

Leider nicht, solche Änderungen muss man sich immer irgendwo notieren, z. B. in einer Datei changes.txt im gleichen Ordner wie die stylsheet.css. Es kann ja auch sein, dass sich jemand einen anderen Umschaltpunkt als 1000px wünscht oder statt 67% lieber 75%, es nützt also nichts, wenn ich das in der stylesheet.css drin lasse. Oder sollte ich? Es stört ja nicht, solange es nirgends verwendet wird.

Wie müssen/können wir die Funktion "stop_all_sliders_by_mouseover" einfügen?

Das ist die Funktion, die Ihr jetzt schon verwendet.

Nach dem Update auf die nächste Version habt Ihr dann ja wieder die Original fotorama.js, die Scripte werden in der index.php gemäss Konfiguration geladen. Also einfach auf die nächste Version warten und nach dem Update die Plugin Konfiguration ändern, denn standardmässig wird "stop_all_sliders_by_mouseover" deaktiviert sein.

Aber vielleicht habt Ihr ja Lust auf die Buttonsteuerung (controls) umzusteigen, das ist sehr komfortabel für Touchscreens, die ja mit mouseover nicht so viel anfangen können, und mouseout können die gar nicht. Man kann auf dem Touchscreen die Slideshow mit klick in den Slider oder auf ein Vorschaubild anhalten, aber dann muss man wie vorher die Seite neu laden, um die Slideshow wieder anzuwerfen. Man hat also für Touchscreens nix erreicht.

Ich habe jetzt extra noch die Buttons vergössert, für "dicke Finger" :

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

Ist natürlich viel Arbeit, aber die meisten Websites werden bereits zu mehr als 50% mit mobilen Geräten besucht,

Grüezi - Gert