WBCE CMS Forum

kleo

Mitglied

MiniSlider bei den Vertal und Hortal

Wenn JavaScript deaktiviert ist, wird beim MiniSlider das erste Bild der Slidershow bei der Hortal Themplate gezeigt und bei Vertal gar nicht.

Woran liegt es?
Was muss geändert werden, um das erste Bild der Slidershow bei der Vertal Themplate mit dem deaktivierten JavaScript darzustellen?

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Meiner Meinung nach soll der Besucher einer Webseite trotz deaktivierter JavaScript im Browser wenigstens das erste Bild einer Slidershow sehen.

Da es in meinem Fall eindeutig an der benutzter Themplate liegt, möchte ich herauskriegen, welche code dafür verantwortlich ist.

Kann mir jemand einen Tipp geben, wo und nach was ich zuerst suchen soll?

Vielen Dank im voraus!!!

florian

Administrator

Re: MiniSlider bei den Vertal und Hortal

Grundsätzlich hast Du recht, dass es gut wäre, wenn bei deaktiviertem JS das erste Bild angezeigt würde. Bei mir ist das allerdings mit dem Minislider weder bei Vertal, noch bei Hortal, noch bei sonst einem Template* der Fall. Kann es auch gar nicht, weil die Bilder im Stylesheet des Sliders auf display:none gesetzt werden, was auch unumgänglich ist, da sonst der Slider nicht funktioniert.
Wunsch ist also afaik mit dem Minislider leider nicht umsetzbar.

(*Template oder Theme, aber nicht Themeplate, nebenbei besserwisserisch angemerkt)

---

Code allein macht nicht glücklich. Jetzt spenden!

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Danke für die Antwort!

Ich teste noch einmal das ganze mit verschidenen Browser und bei zwei verschiedenen Hoster.

Und ich merke es mir: Template und nicht Themplate !!!

;-)

jean

Mitglied

Re: MiniSlider bei den Vertal und Hortal

... das ist jetzt zwar total altmodisch, aber:
einfach ein noscript tag vor den Slider setzen, dort das gewünschte Bild einbinden. Ohne JS bleibt der .slider-wrapper auch unsichtbar, es werden also keine Reststücke ausgegeben.

Mit JS hast du dann deinen Slider, ohne JS das ausgewählte Bild ...

bernd

Developer

Re: MiniSlider bei den Vertal und Hortal

Sooo altmodisch finde ich das gar nicht.
Genau das ist doch die Aufgabe des noscript-Tags: Inhalte anzuzeigen wenn (warum auch immer) Javascript im Browser deaktiviert ist.
Das ganze funktioniert aber nur wenn Javascript wirklich im Browser deaktiviert ist.
Wenn das Laden von Javascript-Dateien z.B. durch eine Firewall blockiert wird, wird der noscript Bereich nicht angezeigt.

---

... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

jean

Mitglied

Re: MiniSlider bei den Vertal und Hortal

... stimmt natürlich.
In so einem Fall dann doch einfach ein display:none-Container für das Bild, der im Standard-Fall durch ein kleines Skript auf display:block gesetzt ist ...

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Wäre das nicht die Afgabe des Moduls selbst das erste oder ein Alternativbild zu zeigen, wenn JS deaktiviert oder geblockt wird?

Geht es vielleicht so ein Code im Modul einzubauen?

florian

Administrator

Re: MiniSlider bei den Vertal und Hortal

Du kannst das dem Modulentwickler vorschlagen:
https://dev4me.com/modules-snippets/ope … inislider/

---

Code allein macht nicht glücklich. Jetzt spenden!

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Versuche ich.
Mein English ist aber unter aller Sau...
;-)

Versuche ihm zuerst auf Deutsch zu schreiben.

dev4me

Developer

Re: MiniSlider bei den Vertal und Hortal

This could be done with a small css trick.

[== CSS ==]
#slider img:nth-of-type(1) {
	display: block;
	max-width: 100%;
}

This will show the first image of the slider.
The max-width should help in making it a little bit responsive.

Just add it at the end of the minislider frontend.css

Ruud

Beitrag geändert von dev4me (20.03.2017 14:41:47)

florian

Administrator

Re: MiniSlider bei den Vertal und Hortal

Hi Ruud,
thank you very much

---

Code allein macht nicht glücklich. Jetzt spenden!

dev4me

Developer

Re: MiniSlider bei den Vertal und Hortal

Note: it will destroy the animations.
Only "fade" will keep working.

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Ich habe die Code zugefügt.

Es funktioniert bei mir bei der Vertal Template leider nicht...

florian

Administrator

Re: MiniSlider bei den Vertal und Hortal

I have to confirm that the CSS trick posted by Ruud does not work with the vertal template, probably due to position absolute/relative issues.
Nevertheless there is another approach.
Edit the /modules/minislider/view.php with the AFE or a text editor.
Before

echo "\n".'<div class="slider-wrapper theme-'.$class.'"><div class="ribbon"></div><div id="slider" class="nivoSlider">';

add the following code:

echo '<noscript><img src="'.$baseurl.$curdir.basename($images[0]['file']).'" /></noscript>';

Then the slider works as expected when JS is active and if JS is deactivated there shines up the first image of the slider.
For testing I blocked JavaScript using the Web Developer Toolbar plugin for Firefox. So maybe there remains the issue if users use other tools like Ghostery or Firewall setting, but I think these are merely powerusers which should know how to cope with layout issues.

---

Code allein macht nicht glücklich. Jetzt spenden!

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Es funktioniert!!!

Das einzige Manko: das Bild ist nicht responsiv...

Ich habe diese Zeile so geändert:

echo '<noscript><div class="slider-wrapper theme-'.$class.'"><div class="ribbon"><img src="'.$baseurl.$curdir.basename($images[0]['file']).'" /></div></noscript>';

Es scheint jetzt auch responsiv zu sein!!!

Bitte testen!

florian

Administrator

Re: MiniSlider bei den Vertal und Hortal

Im Code oben fehlt noch ein weiteres </div> vor dem </div>, wobei ich allerdings keinen Unterschied erkenne zwischen dem Code mit und ohne umgebende <div>s.

---

Code allein macht nicht glücklich. Jetzt spenden!

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Die Originalzeile des Moduls ist auch nur mit einem </div> geschrieben:

echo "\n".'<div class="slider-wrapper theme-'.$class.'"><div class="ribbon"></div><div id="slider" class="nivoSlider">';

Das hat mich auch gewundert...

Sollte man jetzt die beiden Zeilen mit dem </div> ergänzen?

Beitrag geändert von kleo (21.03.2017 11:08:30)

florian

Administrator

Re: MiniSlider bei den Vertal und Hortal

Die <div>s im PHP-Code werden weiter unten geschlossen. Ich habe das in beigefügtem Screenshot farblich hervorgehoben.

---

Code allein macht nicht glücklich. Jetzt spenden!

kleo

Mitglied

Re: MiniSlider bei den Vertal und Hortal

Wenn ich richtig verstehe, dann muss unsere Zeile für noscript so aussehen:

echo '<noscript><div class="slider-wrapper theme-'.$class.'"><div class="ribbon"><img src="'.$baseurl.$curdir.basename($images[0]['file']).'" /></div></div></noscript>';

Oder?

florian

Administrator

Re: MiniSlider bei den Vertal und Hortal

Syntaktisch ist das so korrekt, aber, wie gesagt, ich sehe keinen Darstellungsunterschied zwischen dem Code mit und ohne umgebende <div>s.

---

Code allein macht nicht glücklich. Jetzt spenden!