Bilder als POP UP Menü

Admiss

Grünschnabel
[Thema erledigt] Bilder als POP UP Menü (mit Lightbox2)

Hallo,

ich mach gerade erste Schritte bei Dreamweaver.

Ich hab nun ein Layout für meine HP fertig.
Nun möchte ich Bilder als Pop UP Menü in die HTML Datei reinsetzten.
Also ich hab kleine Bilder 50*50 und 500*500erstellt.
Wenn an auf die kleinen Bilder drauf klickt,
sollen die großen als Pop UP angezeigt werden.

Ich weiß nur nicht wie man das macht.
Gibt es in dreamweaver eine Einstellung?
Wenn ja wo?

Oder wo würde ich dazu ein Tutorial finden?

Für Hilfe bin ich dankbar.

Lg Admiss
 
Zuletzt bearbeitet:
Vielen Dank für den Tipp,

ich hab mir nun gerade lightbox2 heruntergeladen.
Mir gefällt das ganz gut,
aber ich weiß nicht wie ich es einbinde?

Ich hab den Lightbox Ordner in mein Verzeichnis hochgeladen.
Da mein englisch nicht so gut ist, hab ich mich einer deutschen Anleitung bedient.

http://www.vorlagen.uni-erlangen.de/vorlagen/externe-tools/lightbox2.shtml

Nur das :
Man extrahiert die Dateien der zip-Datei in den jeweiligen websource-Ordner. Also z.B. lightbox.css nach /css/lightbox.css und effects.js nach /js/effects.js. Die Bilddateien aus der zip-Datei extrahiert man nach /img.
In die Datei /ssi/head.shtml fügt man nun folgende Zeilen ein:

werd mir nicht klar

Nachdem ich die Datei entpackt hab, waren die in den richtigen Ordner sotiert,
DIe Datei /ssi/head.shtml gibt es in den Ordner nicht.
Kann mir jemand da weiter helfen
 
Wie stellt sich denn deine Projekt-Verzeichnisstruktur dar? Existieren dort die gleichnamigen Ordner (css, images, js)?

Wenn ja, schiebst du die Dateien dort rein, wenn nicht, legst du die extrahierten Ordner in deinem Projekt-Verzeichnis ab.

Wenn sie unter einem anderen Verzeichnisnamen (z.B. img,scripts,style) vorhanden sind, legst du die Dateien dort ab, und korrigierst im Code die Pfadnamen.

DIe Datei /ssi/head.shtml gibt es in den Ordner nicht.
Bei mir auch nicht :)

mfg Maik
 
Also ich hab einen Ordner Namens Home :

Indem befindet sich 1CSS-Datei, 3 Index-Dateien, und ein Ordner Namens Images.

• Die lightbox.css ist im Hauptverzeichnis.
• Den Ordner JS hab ich komplett hochgeladen und ist so im Hauptverzeichnis.
• Die Bilder hab ich im Image-Ordner hochgeladen.

In der js/lightbox.js Datei, hab ich die Pfade zu den Bildern so geändert;

fileLoadingImage: '.../images/loading.gif',
fileBottomNavCloseImage: '.../images/closelabel.gif',

in der /css/lightbox.css hab ich die Zeile 16 und 17 so geändert:

#prevLink:hover, #prevLink:visited:hover { background: url(.../img/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(.../img/nextlabel.gif) right 15% no-repeat; }

In meiner Index Datei hab ich den Link reingesetzt:

<a href=".../images/beispielbild.jpg" rel="lightbox" title="mein Bild">Bild 1</a>


Und die Datei /ssi/head.shtml besitze ich nicht, und finde ich auch nicht im Lightbox Verzeichnis.

Das Problem ist wenn ich den Link Bild 1 anklicke,
werd das Bild auf eine anderen Seite gezeigt. Und nicht als Pop Up Menü ;-(
 
Hast du im Dokumentheader die Dateien eingebunden?
Code:
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

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


Und die Datei /ssi/head.shtml besitze ich nicht, und finde ich auch nicht im Lightbox Verzeichnis.
Wie gesagt, in dem herunterladbaren ZIP-Archiv existiert solch eine Datei überhaupt nicht.

mfg Maik
 
Also ich hab einen Ordner Namens Home :

Indem befindet sich 1CSS-Datei, 3 Index-Dateien, und ein Ordner Namens Images.

• Die lightbox.css ist im Hauptverzeichnis.
• Den Ordner JS hab ich komplett hochgeladen und ist so im Hauptverzeichnis.
• Die Bilder hab ich im Image-Ordner hochgeladen.

In der js/lightbox.js Datei, hab ich die Pfade zu den Bildern so geändert;

fileLoadingImage: '.../images/loading.gif',
fileBottomNavCloseImage: '.../images/closelabel.gif',



in der /css/lightbox.css hab ich die Zeile 16 und 17 so geändert:

#prevLink:hover, #prevLink:visited:hover { background: url(.../img/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(.../img/nextlabel.gif) right 15% no-repeat; }

In meiner Index Datei hab ich den Link reingesetzt:

<a href="http://www.tutorials.de/forum/html-editoren/html-editoren/html-editoren/.../images/beispielbild.jpg" rel="lightbox" title="mein Bild">Bild 1</a>
Bei dieser Verzeichnisstruktur
  • HOME
    • images
      • beispielbild.jpg
      • closelabel.gif
      • nextlabel.gif
      • prevlabel.gif
    • js
      • builder.js
      • effects.js
      • lightbox.js
      • prototype.js
      • scriptaculous.js
    • index.htm
    • index2.htm
    • index3.htm
    • lightbox.css
müssten die Pfade aber ganz anders lauten.

Javascript:
fileLoadingImage: 'images/loading.gif'
fileBottomNavCloseImage: 'images/closelabel.gif'
CSS:
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
HTML:
<a href="./images/beispielbild.jpg" rel="lightbox" title="mein Bild">Bild 1</a>


mfg Maik
 
Naja, das hab ich auch versucht und es hat nicht funktinoert.

Ich werd mir mal die anderen Sachen, von Maik Links, anschauen.
Könnt Ihr was empfehlen?
 
Du hast meine letzte Frage nicht beantwortet.

Bei den anderen "*-Box-Scripts" mußt du ebenfalls auf korrekte Pfade zu den involvierten Dateien achten.

mfg Maik
 
Zurück