Antworten auf deine Fragen:
Neues Thema erstellen

Lightbox-HILFE!!!

fimea

Noch nicht viel geschrieben

Hallo,

ich würde gerne eine Bildergalerie mit lightbox erstellen. Ich versuche es jetzt seit Tagen und bekomme das nicht hin. Ich glaube das ich die codes falsch einbaue. Ich habe keine Erfahrung mit solchen sachen.

Kann mir vielleicht jemand dabei helfen? Ich wäre wirklich sehr dankbar.
 

AW: Lightbox-HILFE!!!

Hi fimea,

wo liegt dein Problem?
im downloadpaket ist eine index.html, die beschreibt sehr gut wie was wo einzubauen ist.

Weitere Probleme?

cu Ohmalley
 
AW: Lightbox-HILFE!!!

hast du in deinen bodytag folgendes eingefügt ->

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

bzw. welche lightbox hast du überhaupt?
 
AW: Lightbox-HILFE!!!

Hallo ohmalley,

erstmal vielen dank das du schnell geantwortet hast. Ich weis das da eine Anleitung dabei ist, da ich aber noch keine Erfahrung in diesen Sachen habe, habe ich trotzdem Schwierigkeiten. :'(

Ich glaube das ich die codes falsch einbaue. Ich bräuchte jemand der mir das erklärt. Es wäre wirklich eine sehr große Hilfe!

DANKE:danke:
 
AW: Lightbox-HILFE!!!

ist ganz einfach:

- die 3 Ordner
- /css, -/js, /images
mit Inhalt 1:1 (als unterordner) in die site übernehmen

- in header der Inhaltsdatei -> zB. bilder.html

diese Dateireferenzen einfügen:
<head>
....steht schon was ...
<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" />
... hier noch was , was ist egal ...
</head>


- in body -> Link zum Bild einfügen: z. B.
<a href="img/bodenbelaege/bodenbelaege_db_Bowl_America3.jpg" rel="lightbox[roadtrip]" title="Bowl America"><img src="img/bodenbelaege/bodenbelaege_db_Bowl_America2.jpg" alt="1" width="70" height="71" border="0" /></a>
Erst das große Bild als Link, das kleine Bild als Anzeige für den Link.

Wichtiger Teil ist " rel="lightbox[roadtrip]" " hier wird auf die Funktion verwiesen, die lightbox erst "einschaltet". Mit dem Schlüsselwort (welches ist egal - muss nur für eine gleiche Gruppe gleich sein) in der Klammer [ ] wird die Gruppe angesprochen, zu der das einzelen Bild gehört. Dann weis lightbox, diese Bilder werden nacheinander angezeigt.

soweit mal, sollte nun funzen..

p.s. ein <body onload ..
ist nicht nötig
 
Zuletzt bearbeitet:
AW: Lightbox-HILFE!!!

Hallo ohmalley,

ich hab´s jetzt wieder versucht, so zu machen wie du es mir erklärt hast.
Jetzt ist es so bei mir, wenn ich auf das bild klicke kommt das andere bild und ich muss auf zurück klicken um auf das andere kleine bild zu kommen.

:'(
 
AW: Lightbox-HILFE!!!

- die 3 Ordner
- /css, -/js, /images
mit Inhalt 1:1 (als unterordner) in die site übernehmen

- in header der Inhaltsdatei -> zB. bilder.html

wie muss ich das machen. Wie übernehme ich diese 3 dateien???
 
AW: Lightbox-HILFE!!!

- die 3 Ordner
- /css, -/js, /images
mit Inhalt 1:1 (als unterordner) in die site übernehmen

- in header der Inhaltsdatei -> zB. bilder.html

Wenn ich diese 3 dateien kopiere und im quelltext einfügen möchte, geht das nicht. Sorry, wenn ich doof anstelle!
 
AW: Lightbox-HILFE!!!

Hallo,
ein link oder zumindes dein Quelltext würden helfen, denn so kann man da nur vermutungen anstellen.:rolleyes:

noch mal ein kleines Beispiel von mir mit den Bildern von

alle Dateien der Lightbox2 sind im Ordner

die Bilder bzw. Thumbnails sind im Ordner

der rest steht im Quelltext der index.htm:

HTML:
<!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>Beispiel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="lightbox2/prototype.js"></script>
<script type="text/javascript" src="lightbox2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox2/lightbox.js"></script>

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

<style type="text/css">
body {
margin:0;
padding:0;
background:#fff;
}

h1 {margin:0.5em; }

ul, li {margin:0 0.5em; padding:0; list-style-type:none; }

li img {
margin:0.5em;
padding:0.2em;
border:1px solid #999;
background:#fff;
}


</style>

</head>

<body>
<h1>Lightbox 2</h1>

<ul>
<li><a href="bilder/image-1.jpg" rel="lightbox[bilder]" title="Bild1"><img src="bilder/thumb-1.jpg" width="100" height="40" alt="Bild1" /></a></li>
<li><a href="bilder/image-2.jpg" rel="lightbox[bilder]" title="Bild2"><img src="bilder/thumb-2.jpg" width="100" height="40" alt="Bild2" /></a></li>
<li><a href="bilder/image-3.jpg" rel="lightbox[bilder]" title="Bild3"><img src="bilder/thumb-3.jpg" width="100" height="40" alt="Bild3" /></a></li>
<li><a href="bilder/image-4.jpg" rel="lightbox[bilder]" title="Bild4"><img src="bilder/thumb-4.jpg" width="100" height="40" alt="Bild4" /></a></li>
<li><a href="bilder/image-5.jpg" rel="lightbox[bilder]" title="Bild5"><img src="bilder/thumb-5.jpg" width="100" height="40" alt="Bild5" /></a></li>
<li><a href="bilder/image-6.jpg" rel="lightbox[bilder]" title="Bild6"><img src="bilder/thumb-6.jpg" width="100" height="40" alt="Bild6" /></a></li>
</ul>



</body>
</html>
 
AW: Lightbox-HILFE!!!

Hier mein Quelltext:

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns=" ">
<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>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 10">
<meta name=Originator content="Microsoft Word 10">
<link rel=File-List href="Dok1-Dateien/filelist.xml">
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Filiz</o:Author>
<o:Template>Normal</o:Template>
<o:LastAuthor>Filiz</o:LastAuthor>
<o:Revision>2</o:Revision>
<o:Created>2008-11-24T09:54:00Z</o:Created>
<o:LastSaved>2008-11-24T09:54:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:Version>10.2625</o:Version>
</o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:HyphenationZone>21</w:HyphenationZone>
<w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>
<w:DisplayVerticalDrawingGridEvery>0</w:DisplayVerticalDrawingGridEvery>
<w:UseMarginsForDrawingGridOrigin/>
<w:Compatibility>
<w:FootnoteLayoutLikeWW8/>
<w:ShapeLayoutLikeWW8/>
<w:AlignTablesRowByRow/>
<w:ForgetLastTabAlignment/>
<w:LayoutRawTableWidth/>
<w:LayoutTableRowsApart/>
<w:UseWord97LineBreakingRules/>
<w:ApplyBreakingRules/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]-->
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
@page Section1
{size:595.3pt 841.9pt;
margin:70.85pt 70.85pt 2.0cm 70.85pt;
mso-header-margin:36.0pt;
mso-footer-margin:36.0pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Normale Tabelle";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";}
</style>
<![endif]-->
</head>
<body lang=DE style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoNormal><o:p>&nbsp;</o:p></p>
</div>
</body>
<a href="Vitamingarten/blume.jpg" rel="lightbox[roadtrip]" title="Bowl America"><img src="Vitamingarten/physalis.jpg" alt="1" width="70" height="71" border="0" /></a>

</html>
 
AW: Lightbox-HILFE!!!

Mensch,

ich bin total verzweifelt, ich krieg das nicht hin.

Wie bekomme ich diese 3 dateien in die seite????
 
AW: Lightbox-HILFE!!!

HTML:
<meta name=Generator content="Microsoft Word 10">
<meta name=Originator content="Microsoft Word 10">

<body lang=DE style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoNormal><o:p>&nbsp;</o:p></p>
</div>
</body>
<a href="Vitamingarten/blume.jpg" rel="lightbox[roadtrip]" title="Bowl America"><img src="Vitamingarten/physalis.jpg" alt="1" width="70" height="71" border="0" /></a>

</html>
:eek::rolleyes:

<meta name=Generator content="Microsoft Word 10">
<meta name=Originator content="Microsoft Word 10">
erstellst du die Seite mit Word ??:uhm:

und das <a href="Vitamingarten/blume.jpg" rel="lightbox[roadtrip]" title="Bowl America"><img src="Vitamingarten/physalis.jpg" alt="1" width="70" height="71" border="0" /></a> sollte in den <body></body> Bereich.

Ich weiß ja nicht wie deine Kentnisse in sachen (x)html und co sind aber, bevor du dich mit Lightbox und co beschäftigst würde ich erstmal das empfehlen um die Grundlagen zu lernen und zu verstehen, sorry.:hmpf:

In meinem Beispiel ist alles wichtige drin, alle wichtigen Dateien der Lightbox2 sind im Ordner lightbox2 dort gibt es auch keine unterordner wie js oder css sondern nur die Dateien, die Bilder sind im Ordner Bilder und die index.htm ist einzeln, also lightbox2, bilder ,index.htm. 2xOrdner und eine .htm Datei.


edit: du bindes die Dateien doch schon ein zumindes das js:
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>

liegen die auch im Ordner "js" oder wo sind die drinn.
Das ist auch ein Grund warum ich im Beispiel alle Dateien ohne Unterordner in einen Ordner "lightbox2" kopiert hab dann ist alles zusammen.:rolleyes:

Dann fehlt auch noch die lightbox.css
HTML:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
:hmpf:
 
Zuletzt bearbeitet von einem Moderator:
AW: Lightbox-HILFE!!!

bin's wieder..

zusätzlich natürlich auch die css-Datei als 4. Datei im head eingefügt werden..

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

am Besten unter die 3 vorherigen. wenn dann auch noch die Ordnerzuordnung stimmt, sollte es nun :-)

@:
OK. Word ist nicht gerade der Bringer für Webseitengestaltung, weil er viel unnötigen Code erzeugt, aber wen's glücklich macht..
 
Zuletzt bearbeitet:
AW: Lightbox-HILFE!!!



Hi,

dein Beispiel ist ja OK.

aber du hast hier Dateien verändert, die so in den download Originaldateien nicht enthalten sind. Das ist dann schon was für >Nicht Anfänger.

Aber sonst hast du Recht. Alles in einem Verzeichnis ist einfacher zu handhaben.

lg
ohmalley
 
AW: Lightbox-HILFE!!!

Hi,

dein Beispiel ist ja OK.

aber du hast hier Dateien verändert, die so in den download Originaldateien nicht enthalten sind. Das ist dann schon was für >Nicht Anfänger.

Aber sonst hast du Recht. Alles in einem Verzeichnis ist einfacher zu handhaben.

lg
ohmalley

Ok geb zu das ist nicht gans so günstig, hab die Pfadangaben abgeändert sorry.:rolleyes:
 
AW: Lightbox-HILFE!!!

Lightbox 2

So sieht´s aus. Wenn ich die codes einfüge. Ich weis ich was falsch.
Tut mir leid das ich nerve. Aber irgendwie muss das doch klappen.

Und wie gesagt, bin ein Anfänger, deswegen verstehe ich nicht das manche so abgenervt sind.:nee:
 
AW: Lightbox-HILFE!!!

Sorry,

(mein letzter Beitrag) ich habe gedacht dass das bildlich dargestellt wird. Hat es aber nicht.
 
AW: Lightbox-HILFE!!!

Ich weis das word nicht geeignet dafür ist, aber ich habe nunmal so gelernt. Bis jetzt hat auch alles gut geklappt.

Habe mit javascript gearbeitet und es hat funktioniert. Aber das mit der lightbox funktioniert irgendwie nicht. Es muss doch irgendwie klappen.:(

Ich versuchs jetzt schon seit tagen, ich will´s unbedingt schaffen.

Deswegen bin für jede HILFE sehr DANKBAR!!!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.883
Beiträge
1.539.688
Mitglieder
67.924
Neuestes Mitglied
HansMeier
Oben