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

Lightbox funktioniert nicht

Status
Für weitere Antworten geschlossen.
B

Broker

Neues Mitglied
Hallo zusammen,

dank der Hilfe der Kollegen von der HTML-Fraktion hier habe ich meine erste HP online, der Code scheint einigermaßen sauber zu sein und alles ist durch ein separates Stylesheet formatiert.

Jetzt möchte ich meine Bilder mit Hilfe der Lightbox (v. 2.04 dt.) aufpeppen. Hierbei kommt zum Tragen, dass ich von Javascript absolut keine Ahnung habe....HTML klappt mal gerade so...

Ich habe die Javascript-Lines in meinen Header eingebaut und auch zum Lightbox-CSS-Sheet referenziert (rel=...)

Die entsprechenden Gif-Dateien liegen im "Images"-Ordner; das Lightbox-CSS beinhaltet die entpsrechenden Pfade.

Die fünf js.-Files habe ich im js-Ordner belassen und der liegt auf dergleichen Ebene wie der CSS-Ordner und der Ordner mit den Images

Ich bekomme das Teil einfach nicht zum Laufen. Wenn ich auf ein Bild klicke, öffnet es sich in einem separaten Fenster. Sonst nichts.

Die HP mit den Javascript-Lines ist noch offline; wenn Ihr also Code braucht, werde ich ihn händig posten...aber vielleicht mache ich ja nur einen Denkfehler.

Was muss ich denn noch beachten?

Vielen Dank für eventuelle Hilfe.

Broker
 
Werbung:
Haben die einzelnen Bilder bei dir auch das Attribut rel="lightbox[g_name]" ? Ansonsten poste lieber den Code, sicher ist sicher.
 
Hallo Tar,

nachfolgend der Code, wobei ich nur das erste Bild zu Testzwecken mit der Lightbox kodiert habe...

<code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Udenheim - Jakobspilgerwegfest 2009</title>
<meta name="keywords" content="udenheim, bergkirche,jakobuspilgerweg">
<meta name="description" content="Willkommen in Udenheim, einem kleinen Weindorf im Herzen Rheinhessens.">
<meta name="robots" content="index, follow">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scritaculous.js?load=,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/udenheim.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/fix-ie.css">
<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="css/fix-ie7.css">
<![endif]-->
</head>

<body>

<div id="wrapper">

<div id="header">
<img src="images/banner.gif" width="768" height="90" alt="Bildercollage">
</div><!-- header -->

<div id="hauptmenue">
<ul>
<li><a href="dorferneuerung.html">Unser Dorf hat Zukunft</a></li>
<li><a href="tourismus.html">Tourismus und Kultur</a></li>
</ul>
</div>

<div class="clearer"></div>

<div id="menue">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="veranstaltungskalender.html">Veranstaltungskalender</a></li>
<li><a href="vereine.html">Vereine und Organisationen</a></li>
<li><a href="geschichte.html">Ortsgeschichte</a></li>
<li><a href="neubaugebiet.html">Baugebiet "Am Kreuz"</a></li>
<li><a href="bilder.html">Bildergalerie</a></li>
</ul>
</div><!--- menue --->

<div id="content">
<h1>Bilder vom Jakobspilgerwegfest 2009</h1>


<div id="pilgerwegfestbilder">
<a href="images/pilgerwegfest_1.gif"><img src="images/pilgerwegfest_1.gif " rel="lightbox" width="100" height="75"
alt="Pilgerwegfest_1"></a>
<a href="pilgerfest_2_gross.html"><img src="images/pilgerwegfest_2.gif" width="100" height="75"
alt="Pilgerwegfest_2"></a>
<a href="pilgerfest_3_gross.html"><img src="images/pilgerwegfest_3.gif" width="100" height="75"
alt="Pilgerwegfest_3"></a>
<a href="pilgerfest_4_gross.html"><img src="images/pilgerwegfest_4.gif" width="100" height="75"
alt="Pilgerwegfest_4"></a>
<p></p>
<a href="pilgerfest_5_gross.html"><img src="images/pilgerwegfest_5.gif" width="100" height="75"
alt="Pilgerwegfest_5"></a>
<a href="pilgerfest_6_gross.html"><img src="images/pilgerwegfest_6.gif" width="85" height="100"
alt="Pilgerwegfest_6"></a>
<a href="pilgerfest_7_gross.html"><img src="images/pilgerwegfest_7.gif" width="100" height="75"
alt="Pilgerwegfest_7"></a>
<a href="pilgerfest_8_gross.html"><img src="images/pilgerwegfest_8.gif" width="100" height="75"
alt="Pilgerwegfest_8"></a>
<p></p>
<a href="pilgerfest_9_gross.html"><img src="images/pilgerwegfest_9.gif" width="100" height="75"
alt="Pilgerwegfest_9"></a>
<a href="pilgerfest_10_gross.html"><img src="images/pilgerwegfest_10.gif" width="100" height="75"
alt="Pilgerwegfest_10"></a>
</div>

<p>Die Bilder zum Vergrößern anklicken!</p>

</div><!-- content -->

<div id="footer">
<p><a href="kontakt.html">Kontakt/Impressum</a>
<a href="disclaimer.html">Disclaimer</a></p>
</div><!-- footer -->

</div><!-- wrapper -->

</body>

</html>

</code>
 
Werbung:
Okay, ich habe mich vertan. Nicht die <img>-Tags brauchen das rel, sondern die <a>-Tags drumherum. So funktioniert es zumindest bei mir hier.
 
Wenn ich es in den <a>-tag packe, passiert garnichts...ansonsten öffnet sich -wie gesagt- das Bild in einem separaten Browserfenster
 
Mir fällt auf, dass du einen Fehler beim einbinden der 2. JavaScriptDatei gemacht hast.

Code: 
<script type="text/javascript" src="js/scriptaculous.js?load=[B]effects[/B],builder"></script>

Ansonsten überprüfe nochmals alle Pfade (die HTML-Datie muss sich im selben Ordner befinden wie die anderen Ordner) und schau, ob du JavaScript aktiviert hast.
 
Werbung:
Den Schreibfehler hatte ich schon korrigiert...danke.

Die HTML-Datei befindet sich im selben Ordner wie der CSS-, der JS- und der Images-Ordner.

Gruß

Broker

N.B. Javascript ist auch aktiviert
 
Jaaaaaaa.....ich Depp hatte vergessen, nach der Korrektur des Schreibfehlers das rel-Atttribut in das <a>-Tag zu packen.....

Jetzt nur noch mal zum Verständnis...ich hatte ja nur ein Bild mit dem Lightbox-Gedöns versehen. Es erscheint auch nur das "Schliessen"-Image auf dem Bild.

Wenn ich mehrere Bilder einer Galerie mit dien Effekten versehen will und auf den vergrößerten "Lightbox-Bilder" die "Weiter-" und "Zurück"-Attribute erscheinen sollen, muss ich das über eine Gruppe definieren, oder?
 
Alle Bilder der selben Galerie benötigen rel="lightbox[galeriename]", bei dir gibst du beispielsweise jedem <a> um jedes Bild rel="lightbox[Pilgerfest]".
 
Werbung:
So, die Überschrift dieses Threads kann geändert werden: Lightbox funktioniert...:)...Dank Tar's Hilfe.

Grundsätzlich bin ich jetzt zufrieden...bis auf eine abschliessende Frage:

Wenn ich die Position der "prev-", "next-" und "close"-Labels innerhalb des angezeigten Bildes ändern wollte, müsste ich in die JS-Datei eingreifen, oder?

Ich hab's mal mit der CSS-Datei probiert, bin da aber zu keinem Ergenbis gekommen.

Da ich aber keinerlei JS-Kenntnisse habe, belasse ich's dabei, und spiele höchstens mal mit ein paar Lightbox-Clones herum (Slimbox z.B.)

Nochmals vielen Dank!

Es grüßt der

Broker
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben