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

Hi,

zum Öffnen eines Popup-Fensters benötigst du Javascript und die open()-Methode des window-Objekts.

Alternativ könntest du aber auch "Lightbox & Co" nutzen:

• Greybox
• iBox
• Lightbox
• LightWindow
• Lytebox
• Slimbox
• Thickbox

mfg Maik

Zitat von Admiss

Gibt es in dreamweaver eine Einstellung?

Sorry, überlesen

JavaScript-Verhalten hinzufügen -> Integrierte Dreamweaver-Verhalten definieren -> Verhalten „Browserfenster öffnen“ definieren

mfg Maik

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/...ightbox2.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 :

1 2 3 4 5

<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

Zitat von Admiss

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.

Code javascript:

1 2	fileLoadingImage: 'images/loading.gif' fileBottomNavCloseImage: 'images/closelabel.gif'

Code css:

1 2	#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-Code:

<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

Ja, das hab ich auch versucht. Das sollte ja head.shtml Datei.
Ich hab es in den Head Bereich meiner Index Datei wo ich den Link gesetzt hab getan.

Aber das tut sich nicht.

Ist die Seite irgendwo erreichbar, um dort mal einen Blick drauf werfen zu können?

mfg Maik

Nein Super,

es hat geklappt.

Ich hab hier

HTML-Code:

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

es nicht so gemacht wie Du es gesagt hast.
Ich hab dummerweise den Punkt vergessen.

Das ist so ärgerlich das man auf so Kleinigkeiten achten muss.

Ich danke Dir sehr. Du hast mir viel weitergeholfen.

Keine Ursache, und immer wieder gerne

mfg Maik

Ich verzweifle.

Mir werden ständig die Bilder auf eine externe Seite angezeigt.
Wenn ich aber dann die Lightbox.css erneut hochlade funktioniert es wieder,
aber nur für eine weile.... dann werden die Bilder wieder auf eine externe Seite angezeigt.

Hier der Link >klick mich<

Weiß vielleicht jemand wo das Problem liegt?