[GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

simonson · 04. Januar 2014 18:23

Hallo Gemeinde,
habe js/jquery-1.7.2.min.js und js/jcarousellite_1.0.1.js im root am server.
Mit einem externen php.schnipsel rufe ich das carousel in einer meiner Seiten auf:

Hier klicken, um den Code zum Kopieren zu markieren

[== php ==]
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script> 
<script type="text/javascript"> 
$(function() {$(".auto").jCarouselLite({ auto: 3000,   speed: 600,  visible: 5, circular: true, }); }); 
</script> 
<div align="center"> 
<div class="carousel auto" align="center"> 
<ul> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_01.png" alt="7" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_02.png" alt="3" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_03.png" alt="7" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_04.png" alt="4" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_05.png" alt="7" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_06.png" alt="6" /></li> 
</ul> 
</div> 
</div>

Das funktioniert im Prinzip recht prächtig, einziger Schönheitsfehler:
wenn die Seite aufgerufen wird tut sich nix :-((, nach neuerlichem Aufruf oder "Neu Laden"
bzw. "F5" läuft alles so wie es soll.

Bin etwas ratlos - könnt Ihr mir helfen?

Vielen Dank vorab!

NaN · 04. Januar 2014 18:57

Mit einem externen php.schnipsel rufe ich das carousel in einer meiner Seiten auf:

Das ist kein PHP.

Pack mal das Javascript-Zeug ganz nach unten.

Andynium · 04. Januar 2014 19:24

Ich vermute mal, dass dein html schneller ausgegeben wird, als das js geladen ist.

Beim Seiten-Refresh liegt das js bereits im Cache des Browser, weshalb es dann funktioniert.

simonson · 04. Januar 2014 19:54

@cyberman - ist auch meine Vermutung, wie aber js "schneller" laden?
@NaN - du hast natürlich recht, es ist html ;-)
wie meinst du "ganz nach unten packen"?
CMSms Seite:

{global_content name='JPS_page_TOP'}
{read_file file="http://www.fw-bau.at/slider_fw_01/slider_fw_01.php"}
<br />
 <div style="
width: 59.5%; float: left; height: 550px; overflow: auto; padding: 10px;
border: 1px solid #CCC; border-radius: 10px; font-size: 13px;
background-color:#FFF; ">
{read_file file="http://www.fw-bau.at/fw_Start_01.php"}
<br />
 </div>

<div style="
width: 35.5%; float: right; height: 550px; overflow: auto; padding: 10px;
border: 1px solid #CCC; border-radius: 10px; font-size: 13px;
background-color: #FFFF99; ">
{catch file="http://www.fw-bau.at/flyer.php"}
 </div>
<div style="clear: both;"> </div>
{global_content name='JPS_page_BOT'}

Wie, wohin?

NaN · 06. Januar 2014 15:20

Ich meine, dass dieser Teil:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script> 
<script type="text/javascript"> 
$(function() {$(".auto").jCarouselLite({ auto: 3000,   speed: 600,  visible: 5, circular: true, }); }); 
</script>

im Seitentemplate nach "unten" vor </body> soll.
Wenn das da oben wirklich Dein Seitentemplate ist, dann schätze ich mal, dass es in den globalen Inhaltsblock "JPS_page_BOT" gehört.

Da Du Dein Javascript + HTML für den Slider offenbar in einem Rutsch aus einer externen PHP-Datei holst, wird das wohl leider nicht so einfach sein.

Mal abgesehen davon...
Dieses hier:

Hier klicken, um den Code zum Kopieren zu markieren

{read_file file="http://www.fw-bau.at/slider_fw_01/slider_fw_01.php"}

Kann eine enorme Performance-Bremse sein.
Wieso baust Du das nicht gleich direkt ins Seitentemplate ein?

simonson · 07. Januar 2014 10:30

@NaN

Danke für Deine Tips und Hinweise - habe alles ausprobiert,
nur leider kommen Resultate, die nicht wirklich befriedigend sind.
Mit leerem cache werden auf einer Seite nur thumnails im slider angezeigt,
auf der nächsten zunächst mal wieder nix, auf der dritten funzt es mal, dann wieder nicht.

Ich werde den ganzen Mist knicken und meinem Freund sagen, er soll sich einen
Profi suchen, der ihm vielleicht weiter helfen kann.

Meine seltsamen Versuche finden sich auf www.fw-bau.at.

Nochmals Dank für Deine Mühe!

Andynium · 10. Januar 2014 21:17

simonson schrieb:

wenn die Seite aufgerufen wird tut sich nix :-(

Was genau tut sich bei dir nix?

Gerade mal mit Opera 18 geschaut. Da slidet es wie (vermutlich) gewünscht ...

simonson · 11. Januar 2014 12:02

@cyberman
Dank für Deine Mühe, aber im IE und auch FF erscheint mal nix oder es "sliden" thumbs
oder es erscheinen nur senkrechte Striche - zumindest wenn ich die Seiten checke und
mit leerem cache starte.
Bei Aktualisierung oder "zweitem" Laden funktioniert alles wie es soll -
daher meine Verunsicherung/Frust.

Andynium · 11. Januar 2014 16:01

Evtl. solltest du erst mal die Seite valide bekommen.

Hab gerade im Quelltext geschaut. Da ist einiges im argen, hab 3 mal einen <head> Bereich gesehen.

simonson · 12. Januar 2014 12:22

Danke für den Hinweis - gibt es einen klugen Editor
mit dem ich die gesamte Seite überprüfen
und Änderungen durchführen kann?

Andynium · 12. Januar 2014 13:30

Ähmm, klugen Editor? Was meinst'n damit?

Die Fehler wirst du schon händisch ausbügeln müssen.

simonson · 12. Januar 2014 20:41

z.B. einen, der HTML / PHP validiert und oder alle Dateien einer Seite "gleichzeitig"
anzeigen bzw. durchsuchen kann.
Die fw-bau habe ich - deinem Rat folgend durchforstet - und entsprechend geändert,
trotzdem treten weiterhin die ursprünglichen Fehler auf.

czarnowski · 12. Januar 2014 21:10

Der IE ist ein Künstler im Cachen von alten Inhalten bis hin zum St. Nimmerleinstag, das ist auch teils beim FF unter Windows der Fall.
Würde einfach mal den gesamten jeweiligen Browsercache killen.

Andynium · 12. Januar 2014 21:19

simonson schrieb:

Die fw-bau habe ich - deinem Rat folgend durchforstet - und entsprechend geändert,
trotzdem treten weiterhin die ursprünglichen Fehler auf.

Da bist du aber noch nicht fertig wink

http://validator.w3.org/check?uri=http% … ne&group=0

simonson · 13. Januar 2014 00:23

Danke - das war ein hartes Seminar!
Ich bin noch nicht ganz durch, habe aber - glaube/hoffe ich zumindest -
eine ganze Menge gelernt!
Nochmals Dank für den link zum "editor" und Deine Hinweise.

Als "gelöst" werde ich erst markieren, wenn ich wirklich durch bin.
Sieht schon recht sauber aus, aber ein paar Fehler bekomme ich einfach nicht weg.
Wahrscheinlich gibt's da noch ein paar Fragen ;-)

Beitrag geändert von simonson (13. Januar 2014 00:58)

Andynium · 13. Januar 2014 05:07

Mit dem Spaghetti - Code (also den Unmengen Inline-Formatierungen) machst du dir es aber auch unnötig schwer. Das ist eigentlich der Job einer zentralen CSS.

By the way - verschieb mal den Aufruf der zwei carousel Javascripte in den head Bereich deines Templates.

NaN · 13. Januar 2014 09:58

By the way - verschieb mal den Aufruf der zwei carousel Javascripte in den head Bereich deines Templates.

Wird nicht gehen, weil dieser Aufruf aus dem externen PHP-Script kommt, welches mit read_file eingebunden wird.
Meiner Meinung nach liegt das Problem darin, dass das inline-Script:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript"> 
$(function() {$(".auto").jCarouselLite({ auto: 3000,   speed: 600,  visible: 5, circular: true, }); }); 
</script>

auf HTML-Elemente zugreifen will, die zu diesem Zeitpunkt noch nicht existieren.
Der Container mit der Klasse "auto" kommt ja erst danach.
Da würde ich eher das PHP-Script ändern und das inline-Script unter den Container packen.
(als Alternative zu der Idee, es nach ganz unten vor </body> zu setzen - wobei ich immer noch nicht verstehe, wieso es ein externes PHP-Script sein muss.)

simonson · 14. Januar 2014 23:15

Hallo Ihr Freundlichen,
habe den ganzen Murks gelöscht - ich bring's so nicht hin.
Für einen Neuanfang folgende Fragen:
Auf verschiedenen Seiten sollen unterschiedliche Karussel laufen,
idealerweise 2 unterschiedliche auf einer Seite - wahrscheinlich in
eigenen divs.
Wie kann ich das - ohne externe php-scripts - realisieren?
Gehören dann die Aufrufe der Karussel in die jeweiligen Seiteninhalte?

Andynium · 14. Januar 2014 13:59

Nachdem du so viel Arbeit reingesteckt hast, würde ich so schnell nicht aufgeben.

Was steht den so spannendes in den PHP-Skripten drin, dass du es nicht anders einfügen kannst?

simonson · 14. Januar 2014 16:55

Hier noch mals der spannnende und geheimnisvolle ;-) schnipsel:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script> 
<script type="text/javascript"> 
$(function() {$(".auto").jCarouselLite({ auto: 3000,   speed: 600,  visible: 5, circular: true, }); }); 
</script> 
<div align="center"> 
<div class="carousel auto" align="center"> 
<ul> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_01.png" alt="7" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_02.png" alt="3" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_03.png" alt="7" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_04.png" alt="4" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_05.png" alt="7" /></li> 
<li><img style="border-radius: 0px;" src="slider_fw_01/Foto_06.png" alt="6" /></li> 
</ul> 
</div> 
</div>

Wie kann ich das Teil sinnvoll in mehrere Seiten - mit unterschiedlichen Bildern
und Parametern - einbauen, ohne dass sich Karussel gegenseitig beeinflussen?

Die Seite ist wieder online und Dank deiner Hinweise scheint sie nun "sauber"
zu sein :-)

Beitrag geändert von simonson (14. Januar 2014 16:57)

czarnowski · 14. Januar 2014 17:08

Hier ist das JS so eingestellt das es auf die CSS Klasse (".auto")reagiert -die mit <div class="carousel auto" align="center"> aktiviert wurde.

Um mehrere Einheiten auf eine Seite zu bringen muss also jeweils eine andere Klasse verwendet werden.
Für jedes DIV mit einer anderen Klasse muss auch das Init vom Carousel gestartet werden.

Siehe auch http://www.gmarwaha.com/jquery/jcarousellite/?#doc .

simonson · 15. Januar 2014 11:01

Danbke euch allen für eure Hilfe!
Resultate der Hinweise:
- der code scheint "sauber" zu sein
- jquery und jcarousellite "wohnen" nun im template
- mit unterschiedlichen Klassen laufen 2 Karussel auf einer Seite
alles läuft also prima!

NUR DAS URSPRÜNGLICHE PROBLEM BESTEHT NACH WIE VOR :-((((

Bei Neustart - mit leerem cache - erscheint erst mal nix oder es "sliden" thumbs
oder es erscheinen nur senkrechte Striche (FF und IE - andere Browser konnte
ich nicht testen).
Bei Aktualisierung (F5) oder nochmaligem anclicken des entsprechende Menu-Punktes
funktioniert alles wie es soll.

NaN · 15. Januar 2014 11:45

Das jcarousel fängt bereits an, bevor alle Bilder geladen wurden.
Dadurch stimmt die Berechnung der Größe des carousel-Containers nicht, weil die Größe der Bilder nicht ermittelt werden kann.

Gib mal jedem Bild im HTML-Quelltext eine konkrete Größe über die Attribute width und height (<img src="..." width="300" height="400" />). Dann sollte es egal sein, ob die Bilder bereits geladen wurden oder nicht, da der Browser bereits weiß, wieviel Platz sie einnehmen werden.

Starte außerdem jcarousel entweder erst, wenn wenigstens das Dokument fertig geladen wurde:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript"> 
$(document).ready(function() {
    $(".auto").jCarouselLite({ auto: 3000,   speed: 600,  visible: 5, circular: true});
});
</script>

oder wenn alle Elemente der Seite geladen wurden (Bilder, CSS, Javascript etc.):

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript"> 
$(window).load(function(){
    $(".auto").jCarouselLite({ auto: 3000,   speed: 600,  visible: 5, circular: true});
});
</script>

Es gibt auch ein Plugin für jQuery mit dem man innerhalb von einem bestimmten Container prüfen kann, ob alle Bilder fertig geladen wurden. Dann kann man jedes Carousel einzeln ansprechen und muss nicht auf die komplette Seite warten.
( onImagesLoad )

Solange das Carousel nicht startet, kannst Du ja ein repräsentatives Hintergrundbild an dieser Stelle anzeigen lassen oder ein kleines "lade-daten-icon" (kann man sich z.B. hier erstellen).

Aber ich glaube, konkrete Maße bei den Bildern und $(document).ready(...) sollten bereits ausreichen.

czarnowski · 15. Januar 2014 12:20

Ich sehe da gerade

Resource interpreted as Script but transferred with MIME type text/x-js: "http://www.fw-bau.at/js/jquery-1.7.2.min.js". /index.php?page=karusseltest:17
Resource interpreted as Script but transferred with MIME type text/x-js: "http://www.fw-bau.at/js/jcarousellite_1.0.1.js".

Da scheint etwas bei der Servereinstellung zu sein.

czarnowski · 15. Januar 2014 12:31

Also unter Chrome 33 erhalte ich aktuell beim Aufruf keine Anzeige.
F5 bringt auch nichts.

Erst wenn ich den Link anklicke läuft es.

Forum für CMS/made simple

#1 04. Januar 2014 18:23

[GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#2 04. Januar 2014 18:57

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#3 04. Januar 2014 19:24

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#4 04. Januar 2014 19:54

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#5 06. Januar 2014 15:20

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#6 07. Januar 2014 10:30

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#7 10. Januar 2014 21:17

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#8 11. Januar 2014 12:02

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#9 11. Januar 2014 16:01

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#10 12. Januar 2014 12:22

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#11 12. Januar 2014 13:30

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#12 12. Januar 2014 20:41

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#13 12. Januar 2014 21:10

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#14 12. Januar 2014 21:19

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#15 13. Januar 2014 00:23

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#16 13. Januar 2014 05:07

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#17 13. Januar 2014 09:58

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#18 14. Januar 2014 23:15

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#19 14. Januar 2014 13:59

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#20 14. Januar 2014 16:55

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#21 14. Januar 2014 17:08

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#22 15. Januar 2014 11:01

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#23 15. Januar 2014 11:45

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#24 15. Januar 2014 12:20

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

#25 15. Januar 2014 12:31

Re: [GELÖST] jcarousellite zeigt bilder erst nach Aktualisierung der Seite (F5)

Fußzeile des Forums