HTML WOW Slider auf eigene Homepage einbinden

thomo

Cadet 3rd Year
Registriert
Dez. 2002
Beiträge
33
Hallo zusammen,

ich versuche jetzt schon ewig und drei Tage den WOW Slider (http://www.http://wowslider.com/de) bzw die damit erstellte Slideshow auf der Homepage meines Instituts einzubinden.

Die Slideshow habe ich schnell und leicht erstellt und auf meiner Festplatte gespeichert. Sie funktioniert auch einwandfrei, da eine index.html samt allerbenoetigten Dateien erstellt wird, die man direkt testen kann.

Auf der Seite ist eine kurze, aber leicht verstaendliche Anleitung (http://wowslider.com/de/faq.html, direkt die erste FAQ-Frage) wie man die Slideshow nun auf der Homepage einbindet. Das habe ich genau so befolgt.

Zusammengfasst muss man alle Dateien fuer die Slideshow auf die Homepage laden und sowohl etwas in den <head>- als auch den <body>-Teil schreiben. Gesagt getan. Leider funktioniert die Slideshow nur eingeschraenkt. Sie funktioniert sozusagen nur in "Standardeinstellungen". Sprich die von mir gesetzten Uebergange, Dauern der Uebergaenge, etc fehlen. durch Rumspielerei weiß ich mittlerweile auch genau woran es liegt.

Die erstellte index.html sieht folgendermaßen aus:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test generated by WOWSlider.com</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="test, WOW Slider, jQuery Photo Gallery, Content Slider" />
	<meta name="description" content="test created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
	<!-- Start WOWSlider.com HEAD section -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	<script type="text/javascript" src="engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
	<!-- Start WOWSlider.com BODY section -->
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
<li><a href="http://www.google.de"><img src="data1/images/bild_01.jpg" alt="bild_01" title="bild_01" id="wows1_0"/></a>bild_01</li>
<li><a href="http://www.google.de"><img src="data1/images/bild_02.jpg" alt="bild_02" title="bild_02" id="wows1_1"/></a>bild_02</li>
<li><a href="http://www.google.de"><img src="data1/images/bild_03.jpg" alt="bild_03" title="bild_03" id="wows1_2"/></a>bild_03</li>
<li><a href="http://www.google.de"><img src="data1/images/bild_04.jpg" alt="bild_04" title="bild_04" id="wows1_3"/></a>bild_04</li>
<li><a href="http://www.google.de"><img src="data1/images/bild_05.jpg" alt="bild_05" title="bild_05" id="wows1_4"/></a>bild_05</li>
<li><a href="http://www.google.de"><img src="data1/images/bild_06.jpg" alt="bild_06" title="bild_06" id="wows1_5"/></a>bild_06</li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="bild_01">1</a>
<a href="#" title="bild_02">2</a>
<a href="#" title="bild_03">3</a>
<a href="#" title="bild_04">4</a>
<a href="#" title="bild_05">5</a>
<a href="#" title="bild_06">6</a>
</div></div>
<span class="wsl"><a href="http://wowslider.com">jQuery Sliders</a> by WOWSlider.com v4.8m</span>
	<div class="ws_shadow"></div>
	</div>
	<script type="text/javascript" src="engine1/wowslider.js"></script>
	<script type="text/javascript" src="engine1/script.js"></script>
	<!-- End WOWSlider.com BODY section -->
</body>
</html>

In den <head>-Teil kommt

Code:
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>

was auch funktioniert. Der Fehler liegt im <body>-Teil und war ganz genau an den Zeilen:

Code:
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>

Aus unerfindlichen Gruenden werden diese Zeilen quasi gar nicht uebernommen. Wenn ich sie auskommentiere gibt es keinen Unterschied. Wenn ich aus der funktionierenden, lokal auf meinem Computer gespeicherten Slideshow die Dateien "wowslider.js" und "script.js" loesche, wird die Slideshow genau so fehlerhaft wie auf der Homepage dargestellt. Die beiden Dateen sind anscheinend fuer meine individuellen Einstellungen zustaendig. Mir ist es ein absolutes Raetsel, wieso diese beiden Zeilen nicht uebernommen werden oder die dazugehoerigen Skriptdateien auf der Homepage nicht funktionieren/ausgefuehrt werden.

Lange Rede, kurzer Sinn: Hat vielleicht jemand eine Idee? Ich waere sehr zum Dank verbunden und bin fuer jede Hilfe dankbar :-)

Gruß,
Thomas

PS: Natuerlich habe ich auf der Homepage die Pfadangaben, wie z.B. src="engine1/script.js", entsprechend angepasst. Daran liegt es also nicht.
 
Was sagen denn die Developer-Tools deines Browsers, genauer gesagt die Konsole? Da muss entweder irgendwo n 404 auftauchen oder aber n JS-Fehler.
 
Sind die Pfadangaben im body wirklich korrekt?

In einem Demo des Ken Burns Effekts auf der wowslider Webseite sieht der Pfad wie folgend aus.

<a class="wsl" href="http://wowslider.com">Ken Burns Effekt Software</a>
</div>
<script type="text/javascript" src="../images/demo/wowslider.js"></script>
<script type="text/javascript" src="../images/demo/noble-kenburns/engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
 
Die Ausgaben aus der Fehlerkonsole wären noch hilfreich. Darin wird wohl der Fehler sein. Vom Aufbau her sieht das in Ordnung aus.
 
Zuerst einmal Danke für eure Kommentare :)

Ich bin leider erst morgen wieder am Institut und kann erst dann die Development Tools auf die Seite loslassen (ich experimentiere nämlich nur auf einer internen Testumgebung, um nichts zu vermurksen ;)). Ich werde mich dann direkt noch einmal melden.

Und die Pfadangaben sind richtig, die habe ich schon angepasst.
 
Same Origin Policy beachtet? So etwas kann bei JS schnell zu Komplikationen führen.
 
Same Origin Policy? Ich kann es zwar übersetzen, mir trotzdem nichts drunter vorstellen :confused_alt:
 
Stimmt da hast du recht, das haette ich auch flott googlen koennen, sorry. Jedenfalls habe ich das beachtet, liegt alles im selben Ordner auf dem Server.

Was die Fehlerkonsole angeht, habe ich die Seite gerade mal aufgerufen (bin gerade wieder am Institut) und mir angeschaut, was dort rauskommt: Seltsamerweise nur lauter Warnungen, die aber auch auf den anderen Bereichen der Seite ausgespuckt werden. Fehler- bzw. Errormeldungen gibt es keine einzige :confused_alt:

/edit: Ich habe die Fehlerkonsole gerade noch einmal im Safari-Browser geoeffnet (vorher im Firefox), siehe da, dort gibt es keine Warnhinweise, allerdings einen Error:

Failed to load resource: the server responded with a status of 404 (Not Found) - load.js

Allerdings scheint das ein anderes Skript zu sein, das mit meinem nichts zu tun hat :-/

Was ich allerdings merkwuerdig finde, ist die Tatsache, dass im Web Inspector von Safari innerhalb der Liste "scripts" die Datei "jquery.js" und innerhalb der Liste "styles" die Datei "style,css" aufgefuehrt werden. Das sind die beiden Dateien, die im head geladen wurden. Von den beiden Javascript Dateien aus dem body (script.js und wowslider.js) ist dort keine Spur. Kommentiere ich die beiden Dateien aus dem head Bereich heraus, werden sie auch nicht mehr im Web Inspector aufgelistet. Das bestaetigt nur meine Vermutung: Die Dateien aus dem head Bereich werden korrekt geladen, die beiden aus dem body Bereich gar nicht.
 
Zuletzt bearbeitet:
Bindest du Scripte im Head ein, werden sie vor der Auslieferung der Seite geladen. Werden sie im Body eingebunden, lädt der Browser erst, wenn der Teil ausgeliefert wird.

Ich vermute, dass dein Problem an dem Javascriptfehler liegt, den du gepostet hast. Der Browser bricht daraufhin die weitere Ausführung ab und dein Slider wird nicht angezeigt.

Edit: Es wird vermutlich nicht helfen die beiden anderen Scripte auch im Head zu laden, da die Funktionen sonst nicht ausgeführt werden. Hier müsstest du programmatisch nachhelfen. Also versuche erstmal den anderen Fehler zu beheben.
 
Alles klar, dann versuche ich diesem load.js mal auf den Grund zu gehen. Dummerweise wird es ueberall auf der Seite geladen (inklusive Fehlermeldung), da muss ich mal rausfinden, wo genau das implementiert ist. Die Ursache hinter dem Error scheint schlicht zu sein, dass die Datei "load.js" am angegebenen Pfad nicht vorhanden ist.

Nach wie vor danke fuer eure Hilfe :)
 
Ein 404 unterbricht keine JS-Ausführung, denn ein 404 ist kein JS-Fehler.

Lass deinen Code lieber mal durch n W3-Validator laufen. Irgendwie vermute ich, dass du schwere Fehler im DOM hast. Ansonsten... fang an, console.log("blabla") zu spammen, um herauszufinden was wo wie ausgeführt wird.
 
Ich gehe auch eher davon aus, dass irgendein anderes Script auf die load.js angewiesen ist und es deshalb zu Folgefehlern kommt.

Ansonsten ist der Tipp hilfreich, mit console.log zu überprüfen, ob die Javascript-Dateien im Body-Tag ausgeführt werden.
Da ich aber nicht weiß, wie der TE mit den DEV-Tools umgehen kann, wären auch Alerts angebracht.
 
Sofern man Chrome oder Firebug nutzt, mag das ja stimmen. Ich bin auch kein Fan von Alerts zum Debuggen, kenne aber genug, die mit was anderem nicht klar kommen würden...
 
Wars im IE nich auch F12? Oder wars da F10? Egal, den Schrotthaufen nutzt eh niemand, der Webentwicklung betreibt.
 
Stimmt im IE ist es auch F12. Und leider muss man im Geschäftsumfeld auf den Rücksicht nehmen :(
 
sags nicht mir... ich muss bei einigen Kunden sogar drauf achten, dass der IE7 noch leidlich geht, weil deren Kunden wiederum... nun ja... speziell sind.
Bei anderen Projekten bau ich einfach ne fette Warnung ein: Dein Browser ist Holzklasse, mach n Update oder leb damit, dass die Seite komisch aussieht.
 
Wir konnten unsere Kunden immerhin schon auf IE8 bringen :D
 
Um noch mal ein kleines Feedback zu geben: An der "load.js" kann es nicht liegen, ich habe das ganze in einem kleinen Testordner auf der richtigen Homepage getestet (dort gibt es keinen Fehler der load.js, da dort die Pfadangabe stimmt) und die beiden Skripte werden immer noch nicht geladen.

Nachdem ich letzten Donnerstag gefuehlte zehn Nervenzusammenbrueche hatte, habe ich gerade eben mal die IT angeschrieben. Ist vielleicht die schlauere Idee ;-)

Jedenfalls vielen Dank fuer eure Hilfe und falls sich etwas neues ergeben sollte, lasse ich es euch wissen! :-)
 
Zurück
Oben