ThumbZoomer

Lösung

Der ThumbZoomer ist ein kleines Skript, das diese Aufgabe übernehmen kann. Er muss lediglich eingebunden werden und die Pfade zu den vergrößerten Bildern erhalten.

Einbindung

Die neue Version 2.0 des ThumbZoomers ist nun ein jQuery-Plugin. Die alten auf MooTools basierenden Versionen samt Demo gibt es unten bei den Downloads.

Um den ThumbZoomer zu verwenden, müssen jQuery und die thumbzoomer.min.js in der Seite eingebunden sein.

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>   
<script type="text/javascript" src="js/thumbzoomer.min.js"></script>

Der Pfad zur vergrößerten Version steht im data-zoomedthumbsrc-Attribut des kleinen Bildes. Es kann auch ein anderes, eigenes Attribut, z. B. data-largesrc verwendet werden (siehe Konfiguration).

<img src="mysmallimage.jpg" alt="My beautiful image" data-zoomedthumbsrc="mylargeimage.jpg" />

Nun muss der ThumbZoomer nur noch aufgerufen werden. Den Rest erledigt der ThumbZoomer.

$(document).ready(function() {
    $('img[data-zoomedthumbsrc]').thumbzoomer();
});

Demo ansehen

Konfiguration

Folgende Optionen können dem ThumbZoomer mitgegeben werden. Diese überschreiben dann die Default-Eigenschaften.

Hier ein Beispiel für eine geänderte Konfiguration:

$(document).ready(function() {
    $('img[data-zoomedthumbsrc]').thumbzoomer({
        zoomedThumbId: 'mythumbid',
        zoomedThumbLayerId: 'myzoomedthumblayer',
        zoomedThumbSrcAttributeName: 'data-largesrc'
    });
});

Die Bilder hätten bei dieser Konfiguration folgende Form:

<img src="mysmallimage.jpg" alt="My beautiful image" data-largesrc="mylargeimage.jpg" />