Problem mit Slideshow

Hi @ all,

habe im _header.tpl meines Shop eine kleine Slideshow über die jQueryLibray in Verbindung mit dem Cycle Plugin eingebaut. Es werden 6 verschiedene Grafiken (a ca. 50 KB) verwendet, die da abwechselnd nach ca. 6 - 8 Sekunden rotieren.

Immer wenn ich mit meiner Entwicklung unter Ubuntu fertig bin starte ich mein XP und teste das Ganze unter MS-IE Explorer.

Da habe ich nun festgestellt das, egal welchen Link ich anklicke, d.h. wenn der Seitenaufbau neu generiert wird, die ganze Latte der 6 Grafiken erstmal untereinander eingeblendet wird, was natürlich unschön aussieht und jedesmal zu einem “Zucken” der ganzen Seite führt.

Unter meinem Ubuntu und Firefox 3.5.8 ist das Symptom gar nicht bzw. kaum erkennbar.

Frage: Woran hängt das? Größe der Grafiken oder generell am IE? oder weil das Ganze im header Template integriert ist?

In anderen Shops werden doch auch Slideshows verwendet, hm …

Gruß
RudiU

Hallo,

im Ernstfall immer am IE :smiley:

Unter Umständen ist ein IE-Hack erforderlich oder der IE kann tatsächlich nicht mit den vorhandenen CSS-Anweisungen.

Gruß

[QUOTE=RudiU;26765]Hi @ all,

habe im _header.tpl meines Shop eine kleine Slideshow über die jQueryLibray in Verbindung mit dem Cycle Plugin eingebaut. Es werden 6 verschiedene Grafiken (a ca. 50 KB) verwendet, die da abwechselnd nach ca. 6 - 8 Sekunden rotieren.

Immer wenn ich mit meiner Entwicklung unter Ubuntu fertig bin starte ich mein XP und teste das Ganze unter MS-IE Explorer.

Da habe ich nun festgestellt das, egal welchen Link ich anklicke, d.h. wenn der Seitenaufbau neu generiert wird, die ganze Latte der 6 Grafiken erstmal untereinander eingeblendet wird, was natürlich unschön aussieht und jedesmal zu einem “Zucken” der ganzen Seite führt.

Unter meinem Ubuntu und Firefox 3.5.8 ist das Symptom gar nicht bzw. kaum erkennbar.

Frage: Woran hängt das? Größe der Grafiken oder generell am IE? oder weil das Ganze im header Template integriert ist?

In anderen Shops werden doch auch Slideshows verwendet, hm …

Gruß
RudiU[/QUOTE]
Der IE hat, zusätzlich zu all den vielen anderen Problemen, halt eine [B]lausige [/B]Javascript-Performance, so dass es länger dauert, bis das Slideshow-Skript die Bilder richtig angeordnet hat…

Ich weiss ja nicht, welches Modul Du verwendest…

Mein Slider-Modul verwendet folgende Struktur, um die Slideshow zu beschreiben:

<div class=“slideshow” [B]style=“background-repeat:no-repeat;background-image: url(slideshow/german/fading_1.jpg);”[/B]>
<ul [B]style=“margin-left:-5000px”[/B]>
<li class=“slideshow_entry”></li>
<li class=“slideshow_entry”></li>
<li class=“slideshow_entry”></li>
<li class=“slideshow_entry”></li>
</ul>
</div>
Ich habe also die “[B]UL[/B]” mit den Bildern erst mal aus dem Sichtbereich verschoben ([B]style=“margin-left:-5000px”[/B]), so dass man die Bilder nicht sieht.

Das jQuery-Slider-Plugin setzt die “margin” dann auf “0” zurück, so dass die Bilder wieder sichtbar sind, erfreulicherweise aber erst, wenn die “LI” richtig positioniert sind, so dass die nicht mehr untereinander liegen…

Damit beim Laden in dem Bildbereich kein leerer Platz vorhanden ist, setze ich noch in dem übergeordneten “DIV.slideshow” das erste Slide als Hintergrundbild ([B]style=“background-repeat:no-repeat;background-image: url(slideshow/german/fading_1.jpg);”[/B]), das aber später von der “[B]UL[/B]” überlagert wird.

So wird der beschriebene Effekt, dass beim Laden alle Bilder sichtbar sind, vermieden.

[QUOTE=avenger;27067]So wird der beschriebene Effekt, dass beim Laden alle Bilder sichtbar sind, vermieden.[/QUOTE]
In Aktion sehen kann man den Slider hier: http://www.robosauger.com/TEST1232--powertemplate/

Ist zwar ein “Gambio GX”-Shop, aber das spielt für die diskutierte Problematik ja keine Rolle…

Ein “OXID”-Shop könnte übrigens genau so aussehen und strukturiert sein (mit “Landing page” und erst späterer Shop-Aktivierung).

Scheint sich so langsam zu einem Trend zu entwickeln, erst mal allgemeine Infos zu präsentieren, und dann auch einen Shop anzubieten.

Hallo,

darf ich fragen, welches Plugin du verwendest?

Ich möchte auch gerade ne Slideshow von Angeboten auf meiner start.tpl platzieren, stoße aber auf denselben Effekt. Auch wenn ich dem übergeordneten Element erstmal ein margin-left von -5000px verpasse, flackern die Grafiken für Bruchteile einer Sekunde kurz untereinander auf.

Ich verwende das jquery/innerfade Plugin und habs mit Firefox 3.6 und IE 8 getestet.

Schöne Grüeß

[QUOTE=hitech;29598]Hallo,

darf ich fragen, welches Plugin du verwendest?

Ich möchte auch gerade ne Slideshow von Angeboten auf meiner start.tpl platzieren, stoße aber auf denselben Effekt. Auch wenn ich dem übergeordneten Element erstmal ein margin-left von -5000px verpasse, flackern die Grafiken für Bruchteile einer Sekunde kurz untereinander auf.

Ich verwende das jquery/innerfade Plugin und habs mit Firefox 3.6 und IE 8 getestet.

Schöne Grüeß[/QUOTE]
jCarouselLite

… die ganze Latte der 6 Grafiken erstmal untereinander eingeblendet wird …

Ich verwende auch das cycle plugin und hatte das gleiche Problem. Ich hab die Elmente einfach von anfang an mit [B]display: none[/B] ausgeblendet.

Was spricht dagegen das mit display: none; zu machen?

mfg

[QUOTE=tobi73de;29602]Was spricht dagegen das mit display: none; zu machen?[/QUOTE]
Weil dann die Grafiken nicht geladen werden…

Die werden aber doch dann vom script angezeigt und somit auch geladen. Und bei einer slideshow hat man ja eh mehrere Sekunden bis das nächste Objekt eingeblendet wird. Insofern braucht man ja nicht alle Elemente von Anfang an über das HTML geladen zu haben, höchstens vielleicht das erste.

Hi,

bin jetzt mit Rumprobieren auch auf display:none gestoßen und das hat mein Problem jetzt mal gelöst. Wie’s bei langsamen Internetverbindungen ausschaut, müsst’ ich mir noch anschauen, ist bei unserer Zielgruppe aber eh eher vernachlässigenswert.