Cloud Zoom - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

Cloud Zoom

Scripte > Bildobjekte


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.

Färbung

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 %.

In diesem Beispiel wird Bewegungsglätte bei einem höheren Wert eine sanfte treibende Wirkung gesetzt.




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>


Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 1 Online
» 61 Heute
» 93 Gestern
» 154 Woche
» 1217 Monat
» 42431 Jahr
» 266637 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt