Dein Modal gibts nur einmal auf der Seite. Z.b.
Zusätzlich packst du in den <a>-Tag die URL des grossen Bildes.
Dann holst du mit JS bei einem Klick auf .popup die URL des Bildes aus dem <a>-Tag und fügst sie ins grosse Bild ein.
Alles ungetestet. Aber so in etwa wird das normalerweise gemacht. Hat auch den Vorteil, dass die grossen Bilder nur bei Bedarf geladen werden.
HTML-Code:
<div id="modal" class="largeImage"><img src="" id="modalImage"></div>
HTML-Code:
<a href="../images/waren/fu0011/fu0011+b.jpg" class="popup"><img src="../images/waren/fu0011/tn_fu0011+b.jpg" alt="Futterhaus" class="verk_foto"></a>
HTML-Code:
$(document).ready(function(){ $('.popup').click (function(event) { event.preventDefault(); var url = $(this).attr('href'); $('#modalImage').attr('src', url); $('#modal').fadeIn(); })});
Kommentar