Ich nutze 4.6.3 und möchte mit dem “anythingslider” folgendes erreichen:
Die wechselnden Bilder sollen sich jeweils dynamisch der Fenstergrösse
anpassen (sowohl in der Breite als auch in der Höhe - weiss dass Bilder
damit verzerrt werden)
Das hat auch prima geklappt bis auf eine Sache:
Wechsele ich die Fenstergrösse NACHDEM ich die Seite in einer bestimmten
Fenstergrösse aufgerufen habe, muss ich “F5” drücken damit der Inhalt wieder
zur Fenstergrösse passt.
(Klar -der Programmcode passt sich der akt. Größe an. Wird am Fenster was geändert, bekommt das der Code natürlich nicht mit, erst nach einer Aktualisierung)
<meta http-equiv=“refresh” content=“x”> ist keine zufrieden stellende Lösung, da der
Slider dann wieder mit dem 1. Bild nach Zeitintervall “x” startet.
Jemand eine Idee?
[QUOTE=laie123;178764]
Die wechselnden Bilder sollen sich jeweils dynamisch der Fenstergrösse
anpassen (sowohl in der Breite als auch in der Höhe - weiss dass Bilder
damit verzerrt werden)[/QUOTE]
OXID schneidet die Pics doch in die passende Größe? Aber OK… Ich hab das gerade auch für einen Shop gemacht wo der Slider dynamisch über die volle Browserbreite gehen soll.
Leg ein transparentes png-File an und speichere das im Images-Ordner, dann ändere die tpl ab, in etwa so:
[{if $sBannerPictureUrl }]
<img src="[{$oViewConf->getImageUrl()}]/sliderspacer.png" style="background:url([{ $sBannerPictureUrl }]) no-repeat fixed center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
[{/if}]
fixed benötigst Du nicht zwingend. Aber das hat zur Folge, dass als Banner immer das transparente png geladen wird und das eigentliche Banner-Pic wird in den Hintergrund geladen.
Je nachdem was Du sonst noch mit dem Slider machen willst kann es sein, dass Du den Slider updaten musst. OXID verwendet auch in der neusten Version nur eine alte Version des Anythingslider. Ich musste den updaten, weil die alte Version kein 100% width versteht, jedenfalls hab ich es nicht hinbekommen.
Danke für die schnelle Antwort.
Aber dann läuft der Slider gar nicht mehr und es wird auch gar kein Bild angezeigt…
SORRY!!!
In Deinem Code fehlte das " hinter "background:url([{ $sBannerPictureUrl }])
Jetzt läuft der Slider und er zeigt auch ein Bild.
Allerdings “vervielfacht” er das Bild nach “rechts” und “unten” - sprich er füllt den Hintergrund mit “vielen Bildern” in O-Grösse statt das er das eigentliche Bild der Grösse des Hintergrund anpasst
Du brauchst den Rest des inline style. no-repeat verhindert das Kacheln und background-size cover skaliert das Bild.
Gesendet von meinem ALIGATOR S5500Duo mit Tapatalk
Ich verwende Deine Anweisung genau so:
[{if $sBannerPictureUrl }]
<img src="[{$oViewConf->getImageUrl()}]/sliderspacer.png" style=“background:url([{ $sBannerPictureUrl }])” no-repeat fixed center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
[{/if}]
Das " vor no-repeat ist zu viel
Gesendet von meinem ALIGATOR S5500Duo mit Tapatalk
NOCHMAL SORRY - zuviel im Kopf heute…
OK - das läuft so, aber:
Er zeigt das Bild trotzdem nicht über den ganzen Bildschirm - sprich er zieht es nicht auf
(Breite - Höhe). sondern lässt Rand.
Wenn Bildschirmgrösse = Bildgrösse und ich das Fenster verkleinere (Breite - Höhe) passt
er das Bild an.
NOCHMAL NOCHMAL SORRY!!!
ALSO:
Er macht das brav bei FireFox und GoogleChrome - aber im IE8 passiert das was ich vorher geschrieben habe:
"Er zeigt das Bild trotzdem nicht über den ganzen Bildschirm - sprich er zieht es nicht auf
(Breite - Höhe). sondern lässt Rand.
Wenn Bildschirmgrösse = Bildgrösse und ich das Fenster verkleinere (Breite - Höhe) passt
er das Bild an."
Kann IE8 background-size? Bin mir da nicht sicher.
Gesendet von meinem ALIGATOR S5500Duo mit Tapatalk
Background-size geht ab IE9. Habs eben gegoogelt. Du kannst mal schauen ob es für IE8 einen hack gibt
Gesendet von meinem ALIGATOR S5500Duo mit Tapatalk
Hm - habe alles mögliche versucht, aber da tut sich nicht viel.
Hast Du vielleicht einen konkreteren Tip?
[QUOTE=laie123;178793]
Hast Du vielleicht einen konkreteren Tip?[/QUOTE]
In Bezug auf was?
IE8 musst Du selber schauen.
Für dynamische Slidergröße musst Du auf jeden Fall in der oxslider.js width und height entfernen. Und in der anythingslider.js die fette Zeile ergänzen
$.anythingSlider.defaults = {
// Appearance
..
[B]expand : true, // If true, the entire slider will expand to fit the parent element[/B]
Dazu musst Du aber den Slider updaten. Es reicht, wenn Du die anythingslider.js mit dieser Datei ersetzt https://github.com/CSS-Tricks/AnythingSlider/blob/master/js/jquery.anythingslider.js
Hm - da tut sich leider nix.
Denke der Zusatz:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.myBackground.jpg’,
sizingMethod=‘scale’);
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘myBackground.jpg’, sizingMethod=‘scale’)”;
könnte helfen.
Mein Problem dabei:
Wie bekomme ich “url([{ $sBannerPictureUrl }])” statt
’.myBackground.jpg’ bzw. ‘myBackground.jpg’ da rein?
[QUOTE=laie123;178823]
Wie bekomme ich “url([{ $sBannerPictureUrl }])” statt
’.myBackground.jpg’ bzw. ‘myBackground.jpg’ da rein?[/QUOTE]
wenn Dein Code in der tpl steht tausch es doch einfach aus. Hab das jetzt nicht getestet, da ich die alten IE nicht mehr unterstütze, aber das sollte gehen.
Habe es so getauscht:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘url([{ $sBannerPictureUrl }])’, sizingMethod=‘scale’);
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘url([{ $sBannerPictureUrl }])’, sizingMethod=‘scale’)”;
Aber dann stellt er kein Bild im Slider dar.
Habe ich in der Anweisung vielleicht src=‘url([{ $sBannerPictureUrl }])’ vielleicht einen Fehler?
[QUOTE=laie123;178846]
Habe ich in der Anweisung vielleicht src=‘url([{ $sBannerPictureUrl }])’ vielleicht einen Fehler?[/QUOTE]
nur den Smarty-Tag reinmachen
src='[{ $sBannerPictureUrl }]'