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

Problem beim Einbau von lightbox 2

D

dreamwoman

Neues Mitglied
Hallo zusammen
Ich bin neu hier und habe folgendes Problem mit meioner Seite:
Ich habe lightbox 2 runtergeladen und komme jetzt mit dem Einbau nicht zurecht (da die Beschreibung in englisch ist). Habe hier schon die entsprechenden Beiträge gelesen, schaffe es aber trotzdem nicht.
Ich möchte, dass auf der Startseite die Bilder beim Anklicken in der lightbox geöffnet werden.

Hier meine Seite:
home 2

Hier die Beschreibung:
http://file:///C:/Users/gabi/Desktop/lightbox2.05 (1)/index.html

Hier mein Quellcode:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"



content="homepage, dokument, webpage, page, web, netz" >
<title>home 2</title>
<!-- Der nachfolgende einzeilige Copyright-Vermerk (c) ist nicht zu löschen.-->

<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->
<!--Ein Entfernen dieses Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->


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

</head>
<body     >


<table  align="center" id="breite" cellspacing="0" cellpadding="0" border="0"  >
<tr>


<!--ende aussentab-->
<td align="center" width="100%"   >

<!--schatten um die seite oben -->
<table width="100%" align="center"       border="0" cellpadding="0" cellspacing="0">
<tr>
 <td id="s1"><img src="http://www.html.de/images/1.jpg" width="22" height="22" border="0" alt=""></td>
 <td id="s2"><img src="http://www.html.de/images/2.jpg" width="22" height="22" border="0" alt=""></td>
 <td id="s3"><img src="http://www.html.de/images/3.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
<tr>
 <td id="s4"><img src="http://www.html.de/images/4.jpg" width="22" height="22" border="0" alt=""></td>
 <td class="haupt" >
<!--ende schatten um die seite oben -->

<!--kopf-->
<table   width="100%"     border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td colspan="2"    id="top1"    ><span id="name"><IMG SRC="http://www.html.de/images/Logoklein.png"></span></td>
</tr>
<tr>
<td width="100%"     >
<table height="100%"   width="100%"     border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="top2" >
<br>
&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td valign="top" align="center" id="top3"  >
<img src="http://www.html.de/images/t02.jpg" width="500" height="296" border="0" alt="" style="border:solid 1px #B0B9B9;">
</td>
</tr>
<tr>
<td valign="top"  id="textbox">

<h2>Willkommen </h2>
<br>
Ich heiße Gabriele S. und bin begeisterte Hobbyfotografin.
<br>
Auf den folgenden Seiten möchte ich Ihnen meine Fotos vorstellen.
<br>
Hier eine kleine Auswahl:
<br>
<TABLE CELLSPACING="10">
<TR>

    <TD ALIGN="center">
    <IMG SRC="http://www.html.de/images/images/trecker.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="CENTER">
    <IMG SRC="http://www.html.de/images/images/schmetterling1.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="center">
    <IMG SRC="http://www.html.de/images/images/makro.jpg" width="150" height="110">
    </TD>

</TR>
</TABLE>
<TABLE CELLSPACING="10">
<TR>

    <TD ALIGN="center">
    <IMG SRC="http://www.html.de/images/images/food1.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="CENTER">
    <IMG SRC="http://www.html.de/images/images/pflanzen13.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="center">
    <IMG SRC="http://www.html.de/images/images/tiere9.jpg" width="150" height="110">
    </TD>

</TR>
</TABLE>
<TABLE CELLSPACING="10">
<TR>

    <TD ALIGN="center">
    <IMG SRC="http://www.html.de/images/images/food4.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="CENTER">
    <IMG SRC="http://www.html.de/images/images/pflanzen5.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="center">
    <IMG SRC="http://www.html.de/images/images/tiere17.jpg" width="150" height="110">
    </TD>

</TR>
</TABLE>
<br>
</td>
</tr>
</table>

</td>
<td rowspan="3"   id="nav" >
<br>


<!-- menü rechts oben 1-->
<div id="menu2">


<ul  >
<li><a href="index.html"  >Home</a></li>
<li><a href="über mich.html"  >Über mich</a></li>
<li><a href="favoriten.html"  >Favoriten</a></li>
<li><a href="kontakt_impressum.html"  >Kontakt/Impressum</a></li>
</ul>
</div>
<!-- ende menü rechts oben 1-->
<br>

<!-- menü rechts oben 2-->
<div id="menu2">
<ul  >
<li><a href="fotos.html"  >Fotos</a></li>
<li><a href="veranstaltungen.html"  >Veranstaltungen</a></li>
<li><a href="projekte.html"  >Projekte</a></li>
</ul>
</div>
<!-- ende menü rechts oben 2-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>






<!-- =========== hier spaltenbreite für rechte navigation  ========== -->
<div id="navigation_breite">&nbsp;</div>
<!-- ========= ende spaltenbreite rechte navigation ============-->

</td>
</tr>


</table>



<!--ende oben-->


<!--  inhalt-->



<!-- ende inhalt-->

<!-- fuss-->

<table width="100%"     border="0" cellpadding="0" cellspacing="0" >
<tr>
<td  id="fuss2"  >Gabriele S. Dortmund<br>
</td>
</tr>
</table>
</td>
<!-- schatten um die seite unten -->
 <td id="s6"><img src="http://www.html.de/images/6.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
<tr>
 <td id="s7"><img src="http://www.html.de/images/7.jpg" width="22" height="22" border="0" alt=""></td>
 <td id="s8"><img src="http://www.html.de/images/8.jpg" width="202" height="22" border="0" alt=""></td>
 <td id="s9"><img src="http://www.html.de/images/9.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
</table>
<!--ende schatten um die seite unten -->




</td>
</tr>
</table>

Es wäre sehr hilfreich für mich , wenn jemand die entsprechenden tags in meinen Code einfügen könnte und sie rot markiert, falls das geht. Ich werde mich dann selbst weiter durcharbeiten. Ich will es ja schliesslich lernen.

Danke im voraus

Gruß Gabi
 
also oben im <head> bereich solltest du die js quellen und die css der lightbox einfügen:

Code: 
<head>

......
<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>
</head>


die Bilder müssen als link definiert sein:


<a href="http://www.html.de/images/images/food1.jpg" rel="lightbox" title="hier dein Titel"><IMG SRC="http://www.html.de/images/images/food1.jpg" width="150" height="110"></a>


hast du es so gemacht??

Grüße Daniel :)
 
Also zuerst mal: Wenn du uns den Link zu einer Datei gibst, der bei dir lokal auf dem PC gespeichert ist (die Beschreibung), dann bringt uns das nichts. Aber ich gehe mal davon aus, dass du folgende Lightbox benutzt:

Lightbox 2
oder?

Wenn dem so ist dann funktioniert das folgendermaßen:

Du kopierst folgenden Code in deinen <head>
HTML: 
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Um die Bilder nun zur Lightbox zu verlinken musst du um deinen <img ...>-Tag einen Link machen und diesen mit rel="lightbox" an die Lightbox anbinden.
HTML: 
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src="Pfad/zum/Bild.jpg" alt="Bildtitel"></a>

Wenn du mehrere Bilder von einer Gruppe hast, dann fügst du bei all denen in den Link rel="lightbox[Gruppenname]" ein. Dann kannst du durch die Bildergruppe direkt in der Lightbox mithilfe von Pfeilbuttons direkt das nächste bzw. vorherige Bild anschauen.
HTML: 
<a href="images/image-1.jpg" rel="lightbox[Gruppenname]" title="my caption"><img src="Pfad/zum/Bild.jpg" alt="Bildtitel"></a>

Ich hoffe mal, das war jetzt verständlich genug (:
Gruß
 
Hallo zusammen
Danke für eure schnellen Antworten.
Ja, ich benutze lightbox 2.
Ich habe den lightbox Ordner auf den Server hochgeladen und die tags laut eurer Beschreibung in meinen Quelltext eingefügt.
Trotzdem muß da noch ein Fehler sein, denn das Ergebnis ist nicht so wie in dem Beispiel.

home 2

Hier auch nochmal mein Quelltext:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"



content="homepage, dokument, webpage, page, web, netz" >
<title>home 2</title>
<!-- Der nachfolgende einzeilige Copyright-Vermerk (c) ist nicht zu löschen.-->

<!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ -->
<!--Ein Entfernen dieses Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen -->


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

<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>
</head>
<body     >


<table  align="center" id="breite" cellspacing="0" cellpadding="0" border="0"  >
<tr>


<!--ende aussentab-->
<td align="center" width="100%"   >

<!--schatten um die seite oben -->
<table width="100%" align="center"       border="0" cellpadding="0" cellspacing="0">
<tr>
 <td id="s1"><img src="images/1.jpg" width="22" height="22" border="0" alt=""></td>
 <td id="s2"><img src="images/2.jpg" width="22" height="22" border="0" alt=""></td>
 <td id="s3"><img src="images/3.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
<tr>
 <td id="s4"><img src="images/4.jpg" width="22" height="22" border="0" alt=""></td>
 <td class="haupt" >
<!--ende schatten um die seite oben -->

<!--kopf-->
<table   width="100%"     border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td colspan="2"    id="top1"    ><span id="name"><IMG SRC="images/Logoklein.png"></span></td>
</tr>
<tr>
<td width="100%"     >
<table height="100%"   width="100%"     border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="top2" >
<br>
&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>
<td valign="top" align="center" id="top3"  >

<img src="images/t02.jpg" width="500" height="296" border="0" alt="" style="border:solid 1px #B0B9B9;">
</td>
</tr>
<tr>
<td valign="top"  id="textbox">

<h2>Willkommen </h2>
<br>
Ich heiße Gabriele S. und bin begeisterte Hobbyfotografin.
<br>
Auf den folgenden Seiten möchte ich Ihnen meine Fotos vorstellen.
<br>
Hier eine kleine Auswahl:
<br>
<TABLE CELLSPACING="10">
<TR>

    <TD ALIGN="center">
    <a href="images/images/trecker.jpg" width="150" height="110" rel="lightbox" title="Trecker"><img src="images/images/trecker.jpg"width="150" height="110 "></a>
    </TD>

    <TD ALIGN="CENTER">
    <IMG SRC="images/images/schmetterling1.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="center">

    <IMG SRC="images/images/makro.jpg" width="150" height="110">
    </TD>

</TR>
</TABLE>
<TABLE CELLSPACING="10">
<TR>

    <TD ALIGN="center">
    <IMG SRC="images/images/food1.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="CENTER">
    <IMG SRC="images/images/pflanzen13.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="center">
    <IMG SRC="images/images/tiere9.jpg" width="150" height="110">
    </TD>

</TR>
</TABLE>
<TABLE CELLSPACING="10">

<TR>

    <TD ALIGN="center">
    <IMG SRC="images/images/food4.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="CENTER">
    <IMG SRC="images/images/pflanzen5.jpg" width="150" height="110">
    </TD>

    <TD ALIGN="center">

    <IMG SRC="images/images/tiere17.jpg" width="150" height="110">
    </TD>

</TR>
</TABLE>
<br>
</td>
</tr>
</table>

</td>
<td rowspan="3"   id="nav" >
<br>


<!-- menü rechts oben 1-->
<div id="menu2">


<ul  >
<li><a href="index.html"  >Home</a></li>
<li><a href="über mich.html"  >Über mich</a></li>
<li><a href="favoriten.html"  >Favoriten</a></li>
<li><a href="kontakt_impressum.html"  >Kontakt/Impressum</a></li>
</ul>
</div>
<!-- ende menü rechts oben 1-->
<br>

<!-- menü rechts oben 2-->
<div id="menu2">
<ul  >
<li><a href="fotos.html"  >Fotos</a></li>
<li><a href="veranstaltungen.html"  >Veranstaltungen</a></li>
<li><a href="projekte.html"  >Projekte</a></li>
</ul>
</div>
<!-- ende menü rechts oben 2-->
<br>
<br>
<br>
<br>

<br>
<br>
<br>






<!-- =========== hier spaltenbreite für rechte navigation  ========== -->
<div id="navigation_breite">&nbsp;</div>
<!-- ========= ende spaltenbreite rechte navigation ============-->

</td>
</tr>


</table>



<!--ende oben-->


<!--  inhalt-->



<!-- ende inhalt-->

<!-- fuss-->

<table width="100%"     border="0" cellpadding="0" cellspacing="0" >
<tr>

<td  id="fuss2"  >Gabriele S. Dortmund<br>
</td>
</tr>
</table>
</td>
<!-- schatten um die seite unten -->
 <td id="s6"><img src="images/6.jpg" width="22" height="22" border="0" alt=""></td>
</tr>
<tr>
 <td id="s7"><img src="images/7.jpg" width="22" height="22" border="0" alt=""></td>
 <td id="s8"><img src="images/8.jpg" width="202" height="22" border="0" alt=""></td>
 <td id="s9"><img src="images/9.jpg" width="22" height="22" border="0" alt=""></td>

</tr>
</table>
<!--ende schatten um die seite unten -->




</td>
</tr>
</table>

Was habe ich falsch gemacht?

Gruß Gabi
 
Zuletzt bearbeitet:
Du hast die JavaScript-Dateien nicht im Unterverzeichnis js abgelegt, wie es in deinem Code steht.
 
Ich habe noch eine Frage. Ich zeige auf meiner Startseite einige Bilder. Ich würde es jetzt gerne noch so hinbekommen, dass man von Bild zu Bild weiterblättern kann.
Kann mir da noch jemand helfen?

Gruß Gabi
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben