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.
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj22_0/cloud_zoom.css" />
<link rel="stylesheet" href="wsX5Obj/Obj22_0/cloud_style.css" />
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="wsX5Obj/Obj22_0/cloud_zoom.js"></script>
Code für den <BODY> Bereich
<div class="Obj197_gallery">
<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">
</a>Bild im neuen Tab öffnen
<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>
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 «