Cloud Zoom - Website X5 Helpsite

Ausschnitte aus einem Bild zoomen.

Eine Möglichkeit Bilder mit einer Art Loopenfunktion auszustatten. Hierzu wird das jQuery cloud-zoom zusätzlich verwendet, dass hier herunter gelden werden kann, aber auch dem Zip-Paket beiliegt.
Die Zip-Datei auf den Rechner laden und das darin befindliche Verzeichnis "cloud-zoom" auf den Server laden.
Die Bilddateien liegen zur Demonstration bei.

Code für den HEAD-Bereich:

<link href="cloud-zoom/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="cloud-zoom/jquery.min.js"></script>
<script type="text/JavaScript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

Code für das HTML-Objekt:

<div class="zoom-section">
<div class="zoom-small-image">
<div style="top: 0px; z-index: 9999; position: relative;" id="wrap">
<a rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10" class="cloud-zoom" href="cloud-zoom/bigimage.jpg" style="position: relative; display: block;">
<img alt="Demo Cloud-Zoom" title="Demo Cloud-Zoom" src="cloud-zoom/smallimage.jpg" style="display: block; border: 0;" /></a>
<div style="position: absolute; left: 0px; top: 0px; width: 240px; height: 320px; background-color: rgb(255, 0, 0); opacity: 0.5; display: none;">
</div>

<div style="background-image: url(&quot;.&quot;); z-index: 999; position: absolute; width: 240px; height: 320px; left: 0px; top: 0px; cursor: move;" class="mousetrap">
</div></div></div>
<div class="zoom-desc">
<h3>Färbung</h3>
<p>Es kann jede Farbe genutzt weden (einschließlich schwarz oder weiß) für das kleine Bild. Die Intensität der Färbung ist vollständig anpassbar, hier gezeigt in rot 50 %.</p>
<p>In diesem Beispiel wird Bewegungsglätte bei einem höheren Wert eine sanfte treibende Wirkung gesetzt.</p>
</div></div>