jQuery Zoom Gallery

Scripte > Bildergalerien

Ausschnitte aus einer Bildergalerie zoomen mit jQuery

Eine Hoover-Loopenfunktion hat jeder bereits gesehen. Hier kommt das jQuery cloud-zoom und eine zweite css-Datei zum Einsatz.

Beim Überfahren des aus der Galerie gewählten 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

Bild im neuen Tab öffnen

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

<a href="wsX5Obj/Obj197_0/img/car1_bg.jpg" class="cloud-zoom" id="cloudZoom" target="_blank">

<img src="wsX5Obj/Obj197_0/img/car1_bg.jpg" title="Mein Auto" class="img-responsive">

Bild im neuen Tab öffnen
</a>

<ul class="Obj197_recent">

<li class="Obj197_container">

<a href="wsX5Obj/Obj197_0/img/car1_bg.jpg"

rel="gallerySwitchOnMouseOver: true,

popupWin: 'wsX5Obj/Obj197_0/img/car1_bg.jpg',
useZoom: 'cloudZoom',
smallImage: 'wsX5Obj/Obj197_0/img/car1_bg.jpg'"

class="cloud-zoom-gallery">
<img itemprop="image" src="wsX5Obj/Obj197_0/img/car1_sm.jpg" class="img-responsive">

</a>

</li>
<li class="Obj197_container">

<a href="wsX5Obj/Obj197_0/img/car2_bg.jpg"

rel="gallerySwitchOnMouseOver: true,

popupWin: 'wsX5Obj/Obj197_0/img/car2_bg.jpg',
useZoom: 'cloudZoom',
smallImage: 'wsX5Obj/Obj197_0/img/car2_bg.jpg'"

class="cloud-zoom-gallery">
<img itemprop="image" src="wsX5Obj/Obj197_0/img/car2_sm.jpg" class="img-responsive">

</a>

</li>
<li class="Obj197_container">

<a href="wsX5Obj/Obj197_0/img/car3_bg.jpg"

rel="gallerySwitchOnMouseOver: true,

popupWin: 'wsX5Obj/Obj197_0/img/car3_bg.jpg',
useZoom: 'cloudZoom',
smallImage: 'wsX5Obj/Obj197_0/img/car3_bg.jpg'"

class="cloud-zoom-gallery"
target="_blank">
<img itemprop="image" src="wsX5Obj/Obj197_0/img/car3_sm.jpg" class="img-responsive">

</a>

</li>
<li class="Obj197_container">

<a href="wsX5Obj/Obj197_0/img/car4_bg.jpg"

rel="gallerySwitchOnMouseOver: true,

popupWin: 'wsX5Obj/Obj197_0/img/car4_bg.jpg',
useZoom: 'cloudZoom',
smallImage: 'wsX5Obj/Obj197_0/img/car4_bg.jpg'"

class="cloud-zoom-gallery"
target="_blank">

<img itemprop="image" src="wsX5Obj/Obj197_0/img/car4_sm.jpg" class="img-responsive">

</a>

</li>

</ul>

</div>

Nach dem <BODY> Tag

Code Datei "cloud_style.css"

.Obj197_container { margin: 20px 20px 10px 0; }

.Obj197_gallery a.cloud-zoom { position: relative; display: block; }

.Obj197_gallery a.cloud-zoom img { display: block; width: 500px; text-align: center; }

.Obj197_recent { display: -webkit-box; list-style: none; }

.Obj197_recent li { border: 1px solid #ddd; }

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 «