Skuriles JavaScript (oder auch HTML?) Problem
0 
Felix Riesterer
0
Skuriles JavaScript (oder auch HTML?) Problem
Guten Tag,
ich habe ein ziemlich komisches Problem mit folgendem Galeriescript:
http://coffeescripter.com/code/ad-gallery/
Das Ganze habe ich in folgendem HTML Code eingebunden (Website eigentlich PHP, die Galerie wird in ein Template eingefügt, ich zeige mal den Ausgabetext aus dem head und aus dem body):
<head>
<!-- unwichtige Scripts und Stylesheets --->
<script src="js/jquery.ad-gallery.js" type="text/javascript"></script>
<script type="text/javascript">
function createGallery() {
var galleries = $('.ad-gallery').adGallery();
}
</script>
</head>
<body onload="createGallery()">
<div id="wrapper">
<div id="mainsite" style="">
<div id="main_content">
<div id="main">
<div id="textbox">
<div id="gallery" class="ad-gallery">
<div style="" class="ad-image-wrapper"><div style="width: 0px; height: 0px; top: 0px; left: 0px;" class="ad-image"><img src="pixlie/pixlie.php?q=/3_y.jpg" height="0" width="0"><p class="ad-image-description"><span>Freie Trauung im Sheraton Hotel Hannover</span></p></div><img style="display: none;" class="ad-loader" src="loader.gif"><div style="height: 0px;" class="ad-next"><div style="opacity: 0.7; display: none;" class="ad-next-image"></div></div><div class="ad-prev"><div style="opacity: 0.7;" class="ad-prev-image"></div></div></div>
<div class="ad-controls">
<p class="ad-info">1 / 13</p><div class="ad-slideshow-controls"><span class="ad-slideshow-start">Start</span><span class="ad-slideshow-stop">Stop</span><span style="display: none;" class="ad-slideshow-countdown"></span></div></div>
<div style="" class="ad-nav"><div style="opacity: 0.6;" class="ad-back"></div>
<div class="ad-thumbs">
<ul style="width: 0px;" class="ad-thumb-list">
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
<li>
<a class="ad-thumb0 ad-active" href="pixlie/pixlie.php?q=/3_y.jpg">
<img style="opacity: 1;" src="pixlie/pixlie.php?q=/3_x.jpg" alt="" class="image0">
</a>
</li>
</ul>
</div>
<div style="opacity: 0.6;" class="ad-forward"></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ad-preloads"></div>
</body>
Nun stellt sich mir folgendes Problem: Wenn ich die Seite ganz normal aufrufe, erscheinen die Thumbs untereinander, da die ul "ad-thumb-list" auf 0px width gestellt ist. Das Große Bild erscheint garnicht. Wenn ich jedoch die Seite mit geöffnetem Firebug öffne, dann kommt die Seite ganz normal. Woran könnte das liegen? Entschuldigung, dass ich den Quelltext einfach so reinwerfe. Ist wahrscheinlich eh zu lang um sich das durchzulesen, aber was macht Firebug mit JavaScript Code? Woran könnte das Ganze liegen?
Grüße, Knight
--
ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(
ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(
-
Liebe(r) Knight,
Woran könnte das Ganze liegen?
ich habe heute einfach keine Lust auf Div-Suppe. Wenn Dein Dokument semantischer wäre, dann könnte ich es vielleicht sogar überblicken. Aber so...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
Ist wahrscheinlich eh zu lang um sich das durchzulesen
Ja: tl;dr
aber was macht Firebug mit JavaScript Code?
Firebug ist vermutlich etwas kreativ und beeinflusst geringfügig die Performance der Seite weil es die JavaScript-Engine blockiert sodass das JavaScript ausgeführt werden kann wenn das eigentliche HTML und CSS fertig geparst ist.
Woran könnte das Ganze liegen?
Vermutlich daran, dass das Galeriescript das von dir erstellte CSS teilweise überschreibt und durch irgendwelche Gründe irgendwas von beiden zu schnell oder zu langsam abläuft und dann "hängen" bleibt.
Da ich mir aber weder deinen Code (zu viele div-Elemente, zu viel Inline-CSS, zu unübersichtlich) noch das Galeriescript angesehen habe, nimm das einfach als Anstoß für deine weitere Recherche.
Du könntest z.B. ein paar Alerts einbauen die das JavaScript anhalten um zu sehen was wann beim Rendering passiert - oder deaktiviere das JavaScript komplett und sieh zu ob das Layout auseinander fällt.