Cloud Zoom - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

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.

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 ""

es gibt insgesamt 1 Kommentar(e)


  1. Wolfgang schreibt am 03.12.2012, 11.39 Uhr

    Wie immer ein tolles Tut von Dir.
    Admin-Antwort: Danke Wolfgang, man müsste nur mehr Zeit haben.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2017




  Besucher Statistik
 » 16 Online
 » 78 Heute
 » 303 Woche
 » 2461 Monat
 » 66451 Jahr
 » 242751 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü