jQuery Zoom Image

Scripte > Bildobjekte

Ausschnitte aus einem Bild zoomen mit jQuery

Eine Hoover-Loopenfunktion hat jeder bereits gesehen. Hier kommt das jQuery cloud-zoom zum Einsatz.

Beim Überfahren des Bildes mit der Maus erscheint eine Lupen-Attrappe und es öffnet sich ein weiteres Fenster mit vergrößerten Bildausschnitten. Der Einbau ist relativ einfach. Die im Code festgelegte Bildgrößen müssen im Ordner "img" entsprechend hinterlegt und verschieden bezeichnet werden. Die Bilder und Bildgrößen werden im HTML-Code hinterlegt.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Code für den <HEAD> Bereich

<!-- Hinweis:

Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<div style=" width: 550px; height: 320px;">

<a href="wsX5Obj/Obj22_0/img_car-bg.jpg"

class="cloud-zoom"
rel="transparentImage: 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
useWrapper: true,
showTitle: true,
zoomWidth:'533',
zoomHeight:'300',
adjustY:0,
adjustX:20

">
<img src="wsX5Obj/Obj22_0/img_car-sm.jpg" title="Mein Auto">

</a>

</div>

</div>

Nach dem <BODY> Tag

Code Datei "cloud_zoom.css"

.cloud-zoom-lens {

border: 4px solid #888;
margin:-4px; /* auf Minus setzen gemäß border */
background-color:#fff;
cursor:move;

}

.cloud-zoom-title {

font-family:Arial, Helvetica, sans-serif;
position:absolute !important;
background-color:#000;
color:#fff;
padding: 3px;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 10px;
top: 0px;

}

.cloud-zoom-wrap { top: 0; z-index: 9999; position: relative; }

.cloud-zoom-big { border: 4px solid #ccc; overflow: hidden; }

.cloud-zoom-loading { color: white; background: #222; padding: 3px; border:1px solid #000; }

» nach oben «