 Fotopräsentation 02 (Lösung mit PopUp-Window)
Eine Lösung mit einer HTML-Seite für die Präsentation der Vorschaubilder. Ein Anklicken eines Vorschaubildes bewirkt das Öffnen eines PopUp-Windows in passender Bildgröße mit der Großansicht.
|
|
Anklicken zeigt die Großansicht im PopUp-Window an
UPDATE 07.02.2010 19:45 Uhr, Hack für Dreamweaver im Script
Das Anwendungsbeispiel Fotopräsenz 02 erlaubt ihre Fotoserien im Netz mit Vorschaubildern zu präsentieren:
Vorteil gegenüber Fotopräsenz 01 ist, dss nicht für jede Großansicht eine separate HTML-Seite hergestellt werden muss.
Der Nachteil liegt in dem Umstand, das neben dem Titeltext kein weiterer Bildkommentar angezeigt wird und Seitenbesucher das Öffnen von PopUp-Windows erlauben müssen.
JavaScript generiert das passende Window.
|
|
|
 Beispiel ansehen 
Die Beispiele Fotopräsenz 1 + Fotopräsenz 2 haben Gemeinsamkeiten:
- Die Vorschau-Bilder sind alle sofort zu sehen.
- Durch kleine Vorschaubilder schnelle Ladezeiten.
- Der Besucher bestimmt selbst welches große Foto er ansehen (laden) möchte.
- Er kann die Anzeigedauer selbst bestimmen.
- Für jedes Bild muß ein Mini-Version hergestellt werden.
Unterschied für dieses Beispiel 2
Hier wird ein JavaScript verwendet, das beim Anklicken der Mini-Vorschaubilder ein PopUp-Window öffnet. Fotos in unterschiedlicher Größe können in einem jeweils passenden Fenster angezeigt werden.
Zusätzliches Feature:
Ein angezeigtes PopUp-Window der Großansicht wird durch den nächsten Linksklick (an beliebiger Stelle) geschlossen.
Übergabeparameter
Beim Aufruf des Scripts für die Anzeige im PopUp-Window müssen als Übergabeparameter folgende Angaben mitgeführt (übergeben) werden:
a) Bildquelle
b) Bildbreite
c) Bildhöhe
d) Titeltext
<a href="Javascript:FotoWindow('gross03.jpg','450','300','Text');">link</a>
Man teilt dem Script also mit 'welches Bild' , 'wie breit' , 'wie hoch' und 'welcher Text in der Titelleiste des Windows' angezeigt werden soll.
Den Rest der Arbeit erledigt das JavaScript im Head-Bereich.
Den Quellcode für das Script können Sie im Kopfbereich oben aufrufen, einsehen und kopieren.
Das Beispiel mit sämtlichen Dateien können Sie auch als ZIP-Datei herunterladen (ca. 120 kB).
Besonderheiten
Besonderheit bei diesem Script ist:
- Das Window wird in der Browserfenstermitte geöffnet (browserabhängig)
- Das Window schließt beim ersten Klicken (an beliebiger Stelle)
|
Home • Bilder • Fotopräsentation 02
Download