Diese Funktion soll die Möglichkeit eines Popup-Fensters für Bild-Vergrößerungen (Vollansichten) bieten, ohne aber ein neues Browserfenster zu öffnen, da zum einen solche sich öffnenden Fenster sehr oft als störend empfunden werden, zum anderen aber immer mehr Popup-Blocker solche Funktionalitäten unterbinden.
Auch bei ausgeschaltetem Javascript kann der Besucher die Vollansicht des Thumbnailbildes erreichen, ohne jedoch den "Popup-Effekt" zu sehen. Daher ist diese Lösung barrierefrei.
Meine Umsetzung wurde beeinflusst durch eine sehr ähnliche Lösung namens Lightbox. Jedoch ist der Javascript-Code von js_popup vollständig von mir entwickelt worden, wenn auch mit tatkräftiger Hilfe aus dem SELFHTML Forum.
Version
aktuelle Version 2.1 (2011/03/13)
Download js_popup_v2.1.zip (26,6 KB)
In Version 2.1 wurde das Resizing übergroßer Bilder repariert. Version 2.1 ist eine völlige Neuerstellung und bietet nur stark beschränkten Support für IE6.
Neu: In Version 2.0 wurde eine Funktionalität zum Weiterblättern implementiert. Alle Bilderlinks in einem Elternelement mit der Klasse "bildergalerie" (kann im Script abgeändert werden) werden nun als eine Gruppe behandelt, durch die hindurchgeblättert werden kann.
Beispiele
| Tabelle mit Bilder-Link |
|---|
 |
| Osterhase |
- Eine Aufzählung
- mit Bilder-Link
- als Listenelement
Textabsatz mit einem Bilder-Link 
mitten im Fließtext. Ein übergroßes Bild liegend 
und ein übergroßes Bild hochkant 
.
Anleitung
Eingebunden wird die nötige JavaScript-Datei regulär über ein SCRIPT-Element im HEAD der HTML-Datei:
<script type="text/javascript" src="mein/pfad/js_popup/js_popup.js"></script>
Es hat sich gezeigt, dass ein im BODY notiertes "onload"-Event die Ausführung dieses Scriptes verhindert. In diesem Falle sollte das Script im BODY notiert werden (am Besten gleich als erstes Element).
Das Script initialisiert sich beim Laden der Seite selbständig und legt am Ende des BODY-Elements ein DIV-Element mit der ID "js-popup" an. Dieses DIV-Element ist zunächst unsichtbar und legt sich bei einer Vollansicht über die komplette Seite. Die eigentliche Vollansicht erscheint dann in einem weiteren DIV mit der ID "js-popup-box", welches sich innerhalb von "js-popup" befindet. Den dazu passenden CSS-Code lädt das Script nach erfolgreichem Laden der Seite automatisch nach, indem es die Datei js_popup/css/js_popup.css in den HEAD des Dokumentes einbindet.
Weiterhin holt sich das Script selbständig alle Links innerhalb aller HTML-Elemente, die den im Script eingestellten CSS-Klassennamen haben und prüft, ob diese Links ein Bild enthalten. Bei Erfolg bekommen diese Links automatisch die Popup-Funktion, während alle anderen Links unverändert bleiben. Auf dieser Seite wurde "bildergalerie" als Klassenname verwendet (ist im Script und im CSS so voreingestellt). Der HTML-Code der Beispiele oben sieht so aus:
<h2>Beispiele</h2>
<div class="bildergalerie">
<table>
<tr><th>Tabelle mit Bilder-Link</th></tr>
<tr>
<td>
<a href="/images/js_popup/bunny.gif">
<img src="/images/js_popup/bunny_.gif" alt="Osterhase" />
</a>
</td>
</tr>
<tr><td>Osterhase</td></tr>
</table>
<ul>
<li>Eine Aufzählung</li>
<li>mit Bilder-Link</li>
<li><a href="/images/js_popup/bunny.gif">
<img src="/images/js_popup/bunny_.gif" alt="Osterhase" /></a></li>
<li>als Listenelement</li>
</ul>
<p>Textabsatz mit einem Bilder-Link <a href="/images/js_popup/bunny.gif"><img src="/images/js_popup/bunny_.gif" alt="Osterhase" /></a> mitten im Fließtext.</p>
</div>
Man kann erkennen, dass es dem Script egal ist, in welcher Verschachtelungstiefe der tatsächliche Bild-Link steht, solange es nur ein übergeordnetes HTML-Element mit der entsprechenden Klasse (hier ein DIV, aber es könnte auch ein passendes anderes sein) gibt.
Beim Klick auf den Link wird dann ein mittig positioniertes "Fenster" eingeblendet, in dem die Bilddatei angezeigt wird. Unterhalb des Bildes wird eine Bildunterschrift angezeigt, deren Textinhalt aus dem ohnehin notwendigen ALT-Attribut des IMG-Elements gefüllt wird. Ist dieses Attribut leer oder nicht vorhanden, so gibt es keine Bildunterschrift.
Viel Erfolg beim Erstellen einer Bildergalerie mit Popups ohne Popupfenster!
Felix Riesterer