Lightbox 2 Problem DW

landeggs · 08.12.2010

Hallo zusammen,
ich habe ein kleines Problem und zwar bekomme ich die lightbox 2 nicht zum laufen. Ich bin nach Anleitung vorgegangen, allerdings habe ich sie in eine bereits vorhandenes html Seite die auch schon auf stylesheet zugreift eingebaut. Hier mal der komplette Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<link href="stylesheets/layout.css" rel="stylesheet" type="text/css" />


<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColLiqCtrHdr">

<div id="container">
<div id="header">
<h1> </h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="lightbox/index.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Portfolio</a>
<ul>
<li><a href="design.html">Design</a></li>
<li><a href="film.html">Film</a></li>
<li><a href="foto.html">Foto</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="mainContent">
<p>  </p>
<p><a href="lightbox/images/Ocean Drive Miami Beach.JPG" rel="lightbox" ><img src="lightbox/images/oceankl.jpg" alt="oc" width="150" height="114" hspace="70" border="0" /></a><a href="lightbox/images/Spiderman.JPG" rel="lightbox"><img src="lightbox/images/spiderman_klein.jpg" alt="sp" width="150" height="114" border="0" /></a><a href="lightbox/images/Universal Park.JPG" rel="lightbox"><img src="lightbox/images/universal_klein.jpg" alt="uni" width="150" height="114" hspace="75" border="0" /></a></p>
<p><a href="lightbox/images/Vogel.JPG" rel="lightbox"><img src="lightbox/images/vogelkl.jpg" alt="vo" width="150" height="114" hspace="70" vspace="30" border="0" /></a><a href="lightbox/images/NBA Spiel.JPG" rel="lightbox"><img src="lightbox/images/nbakl.jpg" alt="nba" width="150" height="114" vspace="30" border="0" /></a><a href="lightbox/images/Krokodil nah.JPG" rel="lightbox"><img src="lightbox/images/kro2kl.jpg" alt="kro" width="150" height="114" hspace="71" vspace="30" border="0" /></a></p>
<p><a href="lightbox/images/Krokodile.JPG" rel="lightbox"><img src="lightbox/images/kro1kl.jpg" alt="kro" width="150" height="114" hspace="70" vspace="0" border="0" /></a><a href="lightbox/images/Tower.JPG" rel="lightbox"><img src="lightbox/images/hauskl.jpg" alt="h" width="150" height="114" border="0" /></a><a href="lightbox/images/Griechisches Haus.JPG" rel="lightbox"><img src="lightbox/images/haus2kl.jpg" alt="h2" width="150" height="114" hspace="71" border="0" /></a></p>
<p><a href="lightbox/images/Harley Davidson.JPG" rel="lightbox"><img src="lightbox/images/harleykl.jpg" alt="harl" width="150" height="114" hspace="70" vspace="30" border="0" /></a><a href="lightbox/images/Matterhorn.JPG" rel="lightbox"><img src="lightbox/images/bergkl.jpg" alt="berg" width="150" height="114" vspace="30" border="0" /></a><a href="lightbox/images/Abendrot.jpg" rel="lightbox"><img src="lightbox/images/abendkl.jpg" alt="abend" width="150" height="114" hspace="71" vspace="30" border="0" /></a></p>

</div>
<div id="footer">
<p>© by • <a href="impressum.html">Impressum</a> • <a href="kontakt.html">Kontakt</a></p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Über Tipps würde ich mich freuen

sokie · 08.12.2010

AW: Lightbox 2 Problem DW

hallo landeggs,
so einen Code mag kaum jemand lesen. Bitte benutze nochmal 'edit' und 'erweitert' um den code in einen codebereich zu packen.(Einrückungen etc)

Damit allein ist allerdings auch nicht so viel anzufangen, es gibt noch ein paar mehr Stellen wo es haken kann, zuvorderst die frage ob die Pfade stimmen.
Datei- und Verzeichnisnamen die Leerzeichen beinhalten solltest du auf jeden Fall vermeiden, sie sind eine Fehlerquelle. Auch solltest du dich entscheiden Dateinamenerweiterungen entweder gross oder klein zu schreiben, aber nicht beides mischen.
Bei Scriptproblemen am besten immer den ganzen kram erstmal auf einen Webspace laden. oftmals gibts unterschiedliches Verhalten.

krid2873 · 08.12.2010

AW: Lightbox 2 Problem DW

Moin,

das Problem wird deine Ordnerstruktur sein. Du hast den Hauptteil der Ligthbox in einen seperaten Ordner gepackt, da passen jetzt nicht mich die internen Dateipfade der Lightbox.

Lösungsansatz:
Also entweder du packst deine Lightbox in keinen extra Ordner oder du lässt es so wie es jetzt ist, musst aber dafür die Dateipfade (zu den Lightbox Grafiken) in den Dateien lightbox.js (Zeilen 49 und 50) und lightbox.css (Zeilen 15 und 16) anpassen.

landeggs · 08.12.2010

AW: Lightbox 2 Problem DW

Es lag tatsächlich nur an der Ordnerstruktur. Jetzt funktioniert es, vielen Dank!
@sokie: Sorry für den unübersichtlichen Code. Nächstes mal pack ich es in den Codebereich. Und danke für das Tutorial

eine Frage hätt ich noch: Kann man die Lightbox mitscrollen lassen? Sie öffnet sich zwar zentriert, beim scrollen bleibt sie aber stehen...

landeggs · 10.12.2010

AW: Lightbox 2 Problem DW

keiner eine ahnung ob das mit dem mitscrollen funktioniert?

fexx · 10.12.2010

AW: Lightbox 2 Problem DW

im css

Code:

#lightbox {
position: fixed;
}