✔ Bildergalerie

Ultraflip

Ultraflip

Erfahrenes Mitglied
Hallo!

Ich bau im Moment an einer neuen Homepgae, in der ich eine Bildergalerie einbauen möchte ... einen passenden Artikel hab ich bei drweb.de schon gefunden. (http://www.drweb.de/trickkiste/tricks204.shtml)

Leider versteh ich den Quelltext nicht ganz und weiß nicht wie ich das einbauen muss ... ich will die Bilder in eine Tabellenzelle reinpacken und die sollen sich genauso bei Mausklick in einem Popup öffnen ...

Muss ich die Bilder umbenennen? Wie pack ich die in den HTML Text? Wie kann ich die Größe einstellen?

Fragen über Fragen ...

Bitte um Hilfe :)

MfG
Ultraflip
 
Am besten schreibst du dir erstmal eine Funktion.
Folgendes gehört in den head-Bereich:
Code: 
<script language="JavaScript">
<!--
function showPic(name) {
    win = window.open("", "", "width=222, height=150");
    win.document.write("<html><head><title>TITLE DES POPUPS</title></head><body>");
    win.document.write("<a href=\"#\" onClick=\"window.close();\"><img border=\"0\" src=\"" + name + "\"></a>");
    win.document.write("</body></html>");
    win.focus();
}
//-->
</script>
Ich setz mal voraus, dass du HTML kannst

window.open() öffnet das Popup. Als Parameter werden

1. Name der Datei (in unserem Fall unnötig, da wir ein leeres Fenster öffnen)
2. Name des Popups (NICHT Titel, in unserem Fall unwichtig)
3. Weitere Einstellungen, wie Breite (width) oder Höhe (height)

übergeben. Das Popup wird der Variablen win zugewiesen. Über diese ist es uns jetzt möglich, Inhalt (HTML-Code) in das Popup zu schreiben.

Das erste win.document.write() fügt den <html>-Tag, sowie den <head>-Bereich und den <body>-Tag ein.
Mit dem zweitem win.document.write() wird das Bild geschrieben und in einen Link eingebaut, bei dem "onClick" (wenn du draufklickst ;)) das Fenster geschlossen wird (window.close();)
Dann wird der HTML-Code abgeschlossen (</body></html>) durch das letzte win.document.write();
Mit der letzten Zeile "win.focus()" wird das Popup automatisch in den Vordergrund gesetzt, sobald das Popup geladen ist.

Anwenden kannst du das Ganze so:
Code: 
<a href="#" onClick="showPic('BILDNAME')">BILD</a>
BILDNAME ersetzt du durch den Dateinamen des Bildes (z.B. foto.jpg), BILD ersetzt du durch das kleine Bild...
 
Zuletzt bearbeitet:
uff ... Danke schonmal vielmals :) HTML ist für mich kein Problem, aber durch Javascript blick ich noch nicht völlig durch ... aber ein dickes DANKE schonmal für die Erklärung ... Ich werd mich morgen mal drann setzten, dass alles auch umzusetzten ...

Ich meld mich, wenn alles geklappt hat :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück