Da hast du diverse Möglichkeiten. Ich weiß nicht in wiefern du in der Thematik Javascript Bibliotheken informiert bist.
Es gäbe da die Lightbox welche dir ermöglicht eine Diashow darzustellen.
Eine andere Möglichkeit für ein "Popup" wäre die Thickbox welche dir neben der Darstellung von Bilder(-serien) auch normale Seiteninhalte ermöglicht.
Zudem gibt es eine Serie von inline-Popup Scripts welche Popups ermöglichen welche innerhalb der aktuellen Seite dargestellt werden (Lightbox, Thickbox, MOOdalbox, Slimbox).
Oder Du machst das Popup selbst:
1) Zunächst benötigen wir ein CSS Stil für den Hintergrund und den Inhalt des Popups.
Der Hintergrund soll halbtransparent und schwarz werden. Zudem soll er den ganzen Seiteninhalt überdecken.
Damit die Boxen später auch die ganze Seite bedecken müssen wir die html und body Stile anpassen.
Zum Schluss sieht das ganze CSS so aus:
CSS:
/* Padding, Höhe und Breite des Dokuments zurücksetzen */
html,body
{
width:100%;
height:100%;
padding: 0;
margin: 0;
}
/* Popup Hintergrund */
#PopupOverlay
{
position: fixed;
z-index:100;
top: 0; left: 0;
height:100%; width:100%;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
display:none;
}
/* Popup Inhalt */
#PopupContent
{
position: absolute;
top:0; left:0;
z-index:110;
background:#FFF;
display:none;
}
2) Als nächstes Benötigen wir natürlich die passenden Div-Tags auf der Seite. Dazu einfach in zwischen den Body Tag diesen Code Einfügen:
HTML:
<div id="PopupOverlay"></div>
<div id="PopupContent"></div>
3) Nun kommt der Javascript Part. Die Funktion zum Abfragen der Escape Taste haben wir ja bereits. Nun muss beim drücken der Escape Taste
Das Popup mit dem Bild angezeigt werden. Dazu erstellen wir eine Javascript Funktion welche es uns ermöglicht ein Bild mit den entsprechenden Maßen
anzugeben. Dieses soll dann beim Aufruf im Content-Div angezeigt werden:
HTML:
<script language="javascript" type="text/javascript">
<!--
/* Das Bild und dessen Maße, welches beim Drücken des ESC Taste im Popup angezeigt wird. */
var displayImage = 'http://img3.imagebanana.com/img/i6dy8ev/ariel_demo.jpg';
var popupHeight = 800;
var popupWidth = 353;
function keyPressHandler(e)
{
var kC = (window.event) ? // MSIE or Firefox?
event.keyCode : e.keyCode;
var Esc = (window.event) ?
27 : e.DOM_VK_ESCAPE; // MSIE : Firefox
if(kC==Esc)
showImage(displayImage, popupWidth, popupHeight);
}
// Zeigt ein Bild in dem Popup an
function showImage(imageUrl, width, height)
{
// Popup Element holen
var popup = document.getElementById('PopupContent');
// Breite und Höhe des Popups anpassen
popup.style.width = width + 'px';
popup.style.height = height + 'px';
// Position anpassen
// Links oben?
popup.style.left = 0;
popup.style.top = 0;
// BildElement anlegen (html-string)
var image = '<img src="'+imageUrl+'" alt="" />';
// Inhalt setzen
popup.innerHTML = image;
//alert(imageUrl);
// Popup sichtbar machen
tooglePopup();
}
// Macht das Popup sichtbar oder versteckt dieses
function tooglePopup()
{
// Popup Elemente holen
var popupbg = document.getElementById('PopupOverlay');
var popupcontent = document.getElementById('PopupContent');
// Sichtbarkeitswert ermitteln
var style = 'none';
if(popupbg.style.display == 'none' || popupbg.style.display == '')
{
style = 'block';
}
// Sichtbarkeit setzen
popupbg.style.display = style;
popupcontent.style.display = style;
}
document.onkeydown=keyPressHandler;
//-->
</script>
Soviel zur Thematik. Ich würde dir jedoch immer noch die ferigen Popup Scripts empfehlen. Diese sind doch ausgereifter und bieten mehr Features.
Ansehen kannst du das Ganze auf:
http://www.CoderLine.net/files/PopupDemo.html
Das Script ist nicht all zu komplex und sollte somit leicht verständlich sein. Bei Fragen einfach wieder melden.
