Image Replacement
| Tags | Image Replacement, Gallery |
|---|---|
| Abstract | Eine Bildergalerie mit Vorschaubildern. Das grosse Bild wird durch Klick auf das Vorschaubild ausgetauscht. |
| Zuletzt geaendert | 2010-01-06 (von 2008-03-27) |
| Browser (getestet) | FF3.5, IE8 |
| jQuery Version | 1.3.2 |
| Plugins | |
| Demos | |
| Hilfreiche Links |
|
Image Replacement
Klick auf eines der Vorschaubilder bewirkt, dass unten das Bild in gross angezeigt wird.
HTML
<div id="preview">
<a href="url/grosses/bild" title="titel_grosses_bild"><img src="vorschaubild"></a>
</div>
<h3 class="dasgrosse">Ueberschrift grosses Bild</h3>
<div class="dasgrosse">... hier soll das grosse Bild hin ... </div>
JavaScript
Die URL des grossen Bildes wird aus dem HREF-Attribut des A-Tags genommen, das das Vorschaubild umgibt. Die Ueberschrift wird aus dem TITLE-Attribut genommen.
Mit e.preventDefault() wird das normale Verhalten eines Klicks auf ein A-Tag unterdrueckt.
$("#preview a").click(function(e) {
e.preventDefault();
var irtitle = $(this).attr('title');
var irhref = $(this).attr('href');
$("div.dasgrosse").html('<img src="' + irhref + '" width="640">');
$("h3.dasgrosse").html(irtitle);
});
