Cloud Zoom - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Website hundertprozent CO2 neutral mit Host Europe
Newsletter anmelden
Direkt zum Seiteninhalt
Scan QR or Download Android App

Cloud Zoom

Scripte > Bildobjekte


Ausschnitte aus einem Bild zoomen.

jQuery

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.

Button Download Script

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.
Logo HTML5
Button Spenden

© 2009 - 2018





Besucher Statistik
» 1 Online
» 441 Heute
» 552 Gestern
» 1502 Woche
» 8734 Monat
» 63277 Jahr
» 309855 Gesamt
Record: 1420 (10.04.2014)
Zurück zum Seiteninhalt