• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

LightBox2 funktioniert nicht

R

RogerBerglen

Neues Mitglied
Ich bin gerade dabei eine Webseite mit Bildern zu erstellen. Dafür möchte ich die LightBox2 einsetzen. Ich habe genau nach den Anleitungen die Dateien in HTML eingebunden und meine Bilder entsprechend verlinkt.
Egal was ich auch versuche, die LightBox funktioniert nicht!!
Lokal in meiner Entwicklungsumgebung klappt nur ein neues Fenster auf, auf dem das Bild alleine angezeigt wird. Wenn ich die HTML-Datei in Firefox lokal öffne, dann passiert einfach gar nichts nachdem ichdas Bild angeklickt habe.
Da mache ich jetzt schon seit Tagen daran herum und bekomme das Ganze nicht zum Laufen.
Wo liegt der Fehler??? Ich weis nicht mehr weiter.

Im Nachfolgenden der HTML-Code. Die Styles sind in einer extra CSS-Datei.

<!DOCTYPE html>
<html lang="de">

<!-- ************************************************************ -->
<!-- * Kopfbereich der Bilder-Frame Seite * -->
<!-- ************************************************************ -->

<head>
<title> Bilder Frame 2004 MFB </title>
<meta name="author" content="Ralf Kaiser" />
<meta name="keywords" content="Motorradfreunde Buchenbachtal, Winnenden, Berglen, Motorradclub, Stammtisch, Buchenbach, Biker" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></Script>

<!-- **************************************** -->
<!-- * Einbindung Light-Box Element * -->
<!-- **************************************** -->

<link rel="stylesheet" href="../css/lightbox.js" type="text/css" media="screen" />

<script type="text/javascript" src="../js/prototype.js"></Script>
<script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>

<!-- **************************************** -->
<!-- * Farbgebung der Elemente * -->
<!-- **************************************** -->

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

<!-- **************************************** -->
<!-- * Bereich um neu hinzugekommene Style- * -->
<!-- * sheet Elemente zu testen bevor diese * -->
<!-- * in die Stylesheet-Datei des Websei- * -->
<!-- * tenprojektes übernommen wird. * -->
<!-- **************************************** -->

<style type="text/css">

/****************************************
* Aktuelle Jahreszahl hervorheben *
****************************************/

.JahrAktuell { color: #00FF00;
text-align: right; }
</style>

</Head>

<!-- ************************************************************ -->
<!-- * Seitenbereich der Bilder-Frame Seite * -->
<!-- ************************************************************ -->

<body>

<!-- **************************************** -->
<!-- * Jahreszahlenleiste links * -->
<!-- **************************************** -->
<!-- * Unter HTML5 dürfen keine Leerzeichen * -->
<!-- * sowie Sonderzeichen in den Dateina- * -->
<!-- * men enthalten sein!! * -->
<!-- **************************************** -->

<table class="Jahreszahlen">
<tr> <td> <a href="../BilderFrame_2015.html"> 2015 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2014.html"> 2014 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2013.html"> 2013 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2012.html"> 2012 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2011.html"> 2011 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2010.html"> 2010 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2009.html"> 2009 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2008.html"> 2008 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2007.html"> 2007 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2006.html"> 2006 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2005.html"> 2005 </a> </td> </tr>
<tr> <td> <a href="../BilderFrame_2004.html"> 2004 </a> </td> </tr>
<tr> <td class="JahrAktuell"> 2004 </td></tr>
</table>

<!-- **************************************** -->
<!-- * Seitenüberschrift * -->
<!-- **************************************** -->

<header class="Seitentitel"> Jahresausfahrt in den S&uuml;dschwarzwald 2004 </header>

<!-- **************************************** -->
<!-- * Fensterbereich für Bildervorschau * -->
<!-- **************************************** -->

<article class="Vorschaubilder">
<table class="Bildervorschau">
<tr> <td> <a href="../Bilder/2004/2004_01_gr.gif" rel="lightbox" title="Bei einer Pause"> <img src="../Bilder/2004/2004_01_kl.gif" alt="Bild 001" /> </a> </td>
<td> <img src="../Bilder/2004/2004_02_kl.gif" alt="Bild 002" /> </td>
<td> <img src="../Bilder/2004/2004_03_kl.gif" alt="Bild 003" /> </td></tr>
</table>
</article>


</body>
</html>
 
Hast Du auch einen Link zur Seite parat? Wenn nicht: schau mal in der JavaScript-Konsole nach Fehlermeldungen beim Anklicken des Bildes.
 
Ich habe die JavaScript-Konsole gefunden. Da stehen 2 Fehler drin:

ReferenceError: Builder is not defined lightbox.js:132
TypeError: $(...) is null
 
Ich werde mir morgen Abend die Anleitung durchlesen und die darin enthaltenen Infos umsetzen. Ich melde mich dann wieder wie der Stand der Dinge ist.
Vielen Dank vorab für die Info.
 
Bin Neugierig. habe in den Ordner geschaut. Aber da gibt es keine
jquery-1.11.0.min.js
lightbox.min.js

Bei mir befinden sich im JS-Ordner nur folgende Dateien:
Builder.js
Effects.js
Lightbox.js
Prototype.js
Scriptaculous.js

sonst nichts weiter.
 
Habe da wohl eine alte Version gehabt. Ich habe auf jeden Fall die neue Version heruntergeladen und in meinen HTML-Code nach Anleitung eingebaut. Funktioniert nun absolut bestens. Vielen Dank für die schnelle Unterstützung.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben