Cloud Zoom - Website X5 Hilfe - Die 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>


Feedbacks zu ""


Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 2 Online
» 66 Heute
» 263 Gestern
» 329 Woche
» 4280 Monat
» 74101 Jahr
» 320679 Gesamt
Record: 1420 (10.04.2014)
Gesamt Downloads:
Zurück zum Seiteninhalt