Abgefahrene Hover Zoom Produkt Präsentation mit jQuery

jquery-hover-zoom-produktpraesentation
Veröffentlicht am 22. Dezember 2010 von Axel Scheuering Web-Usability, Webentwicklung

Hier erfährst du, wie man mit recht wenig Aufwand Produktbilder mit einem intuitiv zu bedienenden und außergewöhnlichem Zoom-Effekt präsentieren kann.

Neulich ist mir im Frontlineshop eine außergewöhnliche Produktpräsentation aufgefallen. Hier wird ein Schuh etwas anders als die anderen Produkte im Shop mit einer speziellen Zoom-Funktion präsentiert, damit man alle Details des Schuhs erkunden kann. Die Produktpräsentation wird durch einen Zoom-Effekt aufgewertet, der eintritt, sobald man mit der Maus über das Produktbild fährt. Außerdem sind weitere Produktbilder des Schuhs verfügbar und werden in einer kleinen Slideshow zur Verfügung gestellt. Jedes weitere Produktbild ist ebenfalls mit diesem Zoom-Effekt versehen.

Das ist insgesamt eine sehr schöne und intuitiv bedienbare Art, Produktbilder zu präsentieren. Grund genug für mich das Ganze einmal genauer zu untersuchen und herauszufinden, wie es rein (programmier)technisch funktioniert.

jQuery ist die Lösung

Auf der Produktdetailseite setzt der Frontlineshop zwei jQuery Plugins ein, welche die eben beschriebenen Funktionalitäten schaffen. Das Plugin “Cloud Zoom” sorgt für das sanfte Zoomen, wenn man mit dem Mauszeiger über das Bild fährt. Das zweite Plugin “jFlow” ist für die Slideshow zum Anzeigen der weiteren Produktbilder zuständig. Sehen wir uns also an, wie diese beiden Plugins zusammenarbeiten. Dazu habe ich die Funktionalität des Frontlineshops nachprogrammiert und erkläre im Folgenden, wie es geht. Das Ergebnis kannst du dir hier ansehen.

Das Grundgerüst der HTML-Datei

Zuerst brauchen wir natürlich eine HTML-Datei. Damit alles auf dem neuesten Stand ist, habe ich als Doctype HTML5 gewählt:

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery hover zoom</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="style/style.css" />
		<meta name="robots" content="noindex, follow" />
		<!-- HTML5 Elemente älteren Browsern zugänglich machen (muss im head stehen, sonst funktioniert es nicht) -->
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
	<section id="content">
		<header>
			<hgroup>
				<h1>jQuery hover zoom</h1>
				<h2>Hover Zoom Produktpräsenation mit jQuery</h2>
			</hgroup>
		</header>
		<section id="jFlow_slider">
			<!-- Hier kommen dann die Produktbilder rein -->
	    </section><!-- #jFlow_slider -->

	    <section id="copyright">
	    	<p>Das Foto wurde von <a href="http://www.flickr.com/photos/davidscheppus/" target="_blank">David Scheppus</a> bei Flickr unter der Creative Commons Lizenz veröffentlicht.</p>
	    	<p>» zurück zum <a href="http://www.methode-web.de/jquery-hover-zoom-produktpraesentation">Blogpost</a>.</p>
		</section>

	</section> <!-- #content -->

	<!-- jQuery laden -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	</body>
</html>

Erklärungsbedarf besteht wahrscheinlich in den Zeilen 8-11. Hier verwenden wir ein JavaScript namens HTML5Shiv, das allen schlechten Browsern die neuen HTML5-Elemente bekannt macht, damit diese wissen, wie sie dargestellt werden müssen.

Wo jetzt in Zeile 22 nur ein HTML-Kommentar steht, wird später unsere Produktpräsentation mit den Bildern und dem Zoom-Effekt zu finden sein.

Schließlich laden wir in Zeile 33 noch die aktuelle Version von jQuery, die wir später brauchen, weil ohne jQuery unsere jQuery-Plugins logischerweise nicht funktionieren werden.

Bilder vorbereiten

Insgesamt wollen wir auf der Seite drei unterschiedliche Bilder präsentieren und sie jeweils zoombar machen. Somit brauchen wir von jedem Bild

  1. ein Thumbnail
  2. eine Normal-Ansicht
  3. eine Zoom-Version, die wesentlich größer ist

Die Thumbnail-Bilder in unserem Beispiel sollen eine Größe von 100 x 105 Pixel haben. Die Normalansichten sind jeweils 300 x 316 Pixel groß und die Maße der Zoom-Varianten sind 1000 x 1052 Pixel. Die Bilder so zu skalieren, dürfte für jeden, der einigermaßen mit einem gängigen Bildbearbeitungsprogramm umgehen kann, kein Problem sein.

Wir brauchen bei der Normalansicht aber jeweils unten links eine kleine Lupe und den Zoom-Schriftzug. Schließlich würden sonst wahrscheinlich relativ wenige Menschen auf die Idee kommen extra mit der Maus über das Bild zu fahren. Auch wenn der Zoom-Schriftzug also keine eigene Funktionalität mitbringt, dient er dazu, dass überhaupt gezoomt wird.

Zur Bildbearbeitung nutze ich grundsätzlich Gimp. Um die Linse der Lupe zu erzeugen, macht man in Gimp einfach eine kreisförmige Auswahl. In unserem Beispiel ist sie 8 x 8 Pixel groß. Danach kann man einen Pfad aus der Auswahl erzeugen:

Pfad in Gimp aus einer Auswahl anlegen

Pfad in Gimp aus einer Auswahl anlegen

Nachdem der Pfad erzeugt ist, wird die Auswahl aufgehoben und der Pfad nachgezogen. Dazu kann man in Gimp bestimmen, wie dick die Linie sein soll und dass mit abgerundeten Kanten gearbeitet werden soll:

Stärke der Linie für das Nachziehen in Gimp festlegen

Stärke der Linie für das Nachziehen in Gimp festlegen

So erstellt man recht einfach die kleine Lupe. Fehlt nur noch der Zoom-Schriftzug. Diesen fügen wir mit dem Textwerkzeug ein:

Lupe und Schriftzug in Gimp einfügen

Lupe und Schriftzug in Gimp einfügen

Schließlich machen wir den weißen Schriftzug und die weiße Lupe noch etwas transparent, damit diese nicht so penetrant ins Auge stechen, sondern eher dezent in der linken unteren Ecke platziert sind. Dies geht mit dem Ebenen-Dialog:

Ebene in Gimp transparent machen

Ebene in Gimp transparent machen

Dann sind unsere Bilder in der Normalansicht mit dem Zoom-Schriftzug auch schon fertig.

Cloud Zoom jQuery Plugin verwenden

Um den sanften Zoom-Effekt zu erzeugen, wenn der Benutzer mit dem Mauszeiger über das Bild fährt, nutzen wir das jQuery Plugin “Cloud Zoom”. Auf der Website des Plugin-Programmieres kann man es herunterladen. Dort finden sich auch unterschiedliche Beispiele für dessen Einsatz.

Das Plugin besteht aus einer CSS- und einer JavaScript-Datei. Beide binden wir in unsere HTML-Datei ein. Die CSS-Datei im head-Tag (hier im Beispiel in Zeile 5) und die JavaScript-Datei vor dem schließenden Body-Tag.

<head>
	<title>jQuery hover zoom</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style/style.css" />
	<link rel="stylesheet" type="text/css" href="style/cloud-zoom.css" />
	<meta name="robots" content="noindex, follow" />
	<!-- HTML5 Elemente älteren Browsern zugänglich machen (muss im head stehen, sonst funktioniert es nicht) -->
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

Cloud Zoom JavaScript-Datei:

<!-- cloud zoom Plugin laden -->
<script type="text/JavaScript" src="js/cloud-zoom.1.0.2.min.js"></script>
</body>

Alles, was wir noch tun müssen, damit der Zoom-Effekt nun funktioniert, ist das jeweilige Bild mit der Normalansicht innerhalb eines a-Tags und eines divs mit speziellen IDs zu platzieren:

<div id="slide_01" class="cloud_zoom_wrap">
    <a href="img/boxfresh-sparko-iv-leather-large.jpg" class="cloud-zoom" rel="position:'inside', showTitle:false">
     	<img src="img/boxfresh-sparko-iv-leather-small.jpg" alt="Boxfresh Sparko IV Leather" title="Optional title display" widt="300" height="316" />
    </a>
</div><!-- #slide_01 -->

Im rel-Attribut des a-Tags, gibt man die Variante des Effekts an. Es gibt eine Variante, wo die vergrößerte Ansicht des Bildes neben der Normalansicht erscheint. Eine andere Variante lässt die vergrößerte Ansicht quasi in dem Bereich der Normalansicht erscheinen. Das wollen wir so. Deshalb geben wir im rel-Attribut position:'inside' an.

Das Kennzeichnen des umgebenden a-Tags mit class="cloud-zoom" sorgt dafür, dass das jQuery-Plugin das Bild im Inneren erkennt und den Zoom-Effekt ermöglicht.

Die CSS-Datei von Cloud Zoom bearbeiten

Wir müssen noch ein paar Unschönheiten per CSS beseitigen, damit das Ganze auch chic aussieht. Der Rand, welcher standardmäßig das Bild umgeben würde muss ebenso entfernt werden, wie die Border, die das Bild umgeben würde, wenn jemand zoomt. Auch die Breite der umgebenden a-Tags setzen wir neu, damit diese nicht breiter sind, als das jeweilige Bild. Somit verhindern wir, dass dieser Link anklickbar ist und jemand die große Ansicht des jeweiligen Bildes direkt im Browser öffnen kann. Die fertige Datei soll dann so aussehen:


/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
	border: 4px solid #888;
	margin:-4px;	/* Set this to minus the border thickness. */
	background-color:#fff;
	cursor:move;
}

/* This is for the title text. */
.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;
}

/* This is the zoom window. */
.cloud-zoom-big {
	overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
	color:white;
	background:#222222;
	padding:3px;
	border:1px solid #000000;
}

/* No blue border arround the a, which surrounds the img tag */
.cloud-zoom img {
	border:none;
}

/* Set the width of the surrounding a to 300px. We don't want the user to click through the large image */
.cloud-zoom {
	width:300px;
}

jFlow Slide-Effekt zum Laufen bringen

Alles, was von der Funktionalität her jetzt noch fehlt, ist eine funktionierende Slideshow. Unter der Produktabbildung sollen drei Thumbnails erscheinen. Wenn ein Benutzer auf eines der Thumbnails klickt, soll das entsprechende Bild angezeigt werden und zoombar sein.

Der Mittelteil unserer HTML-Datei, wo ganz am Anfang Hier kommen dann die Produktbilder rein stand, wird deshalb folgendermaßen befüllt und ist damit fertig.

<section id="jFlow_slider">

	<section id="slides">

		<div id="slide_01" class="cloud_zoom_wrap">
		    <a href="img/boxfresh-sparko-iv-leather-large.jpg" class="cloud-zoom" rel="position:'inside', showTitle:false">
		     	<img src="img/boxfresh-sparko-iv-leather-small.jpg" alt="Boxfresh Sparko IV Leather" title="Optional title display" widt="300" height="316" />
		    </a>
	    </div><!-- #slide_01 -->

		<div id="slide_02" class="cloud_zoom_wrap">
		    <a href="img/boxfresh-sparko-iv-leather-large-02.jpg" class="cloud-zoom" rel="position:'inside', showTitle:false">
		    	<img src="img/boxfresh-sparko-iv-leather-small-02.jpg" alt="Boxfresh Sparko IV Leather" title="Optional title display" widt="300" height="316" />
		    </a>
	    </div><!-- #slide_02 -->

		<div id="slide_03" class="cloud_zoom_wrap">
		    <a href="img/boxfresh-sparko-iv-leather-large-03.jpg" class="cloud-zoom" rel="position:'inside', showTitle:false">
		    	<img src="img/boxfresh-sparko-iv-leather-small-03.jpg" alt="Boxfresh Sparko IV Leather" title="Optional title display" widt="300" height="316" />
		    </a>
	    </div><!-- #slide_03 -->

	</section><!-- #slides -->

    <section id="controller">
      <img class="jFlowControl" src="img/boxfresh-sparko-iv-leather-thumbnail.jpg" width="100" height="105" />
      <img class="jFlowControl" src="img/boxfresh-sparko-iv-leather-thumbnail-02.jpg" width="100" height="105" />
      <img class="jFlowControl" src="img/boxfresh-sparko-iv-leather-thumbnail-03.jpg" width="100" height="105" />
      <div class="clearfloat">&nbsp;</div>
    </section><!-- #controller -->

</section><!-- #jFlow_slider -->

Damit jFlow auch richtig funktioniert, ist es wichtig, dass das section-Element, welches die einzelnen Bilder umgibt (Zeile 3) die ID slides trägt, denn diese ID brauchen wir später, wenn wir jFlow initialisieren.

In den Zeilen 25 bis 30 platzieren wir die Thumbnails zum Umschalten der Bilder. Durch die Kennzeichnung mit class="jFlowControl" weiß das jFlow Plugin, dass diese Thumbnails zum Umschalten der Bilder dienen sollen.

In der CSS-Datei des Beispiels ist auch noch ein bisschen Kosmetik für die Thumbnails enthalten. Z. B. dass sie mit float:left nebeneinander stehen und dass der Cursor eine kleine Hand wird, wenn der User darüber fährt. Das Codebeispiel an dieser Stelle spare ich mir, schließlich ist die CSS-Datei auch im Quellcode des Beispiels enthalten, das weiter unten heruntergeladen werden kann.

Als nächstes laden wir noch das entsprechende jQuery Plugin vor dem schließenden body-Tag. Leider kann man das Plugin aktuell nicht von der Seite des Entwicklers herunterladen. Wer es verwenden möchte, findet weiter unten den Link zum Quellcode dieses Beispiels, wo natürlich auch das jQuery Plugin jFlow enthalten ist.

<!-- jFlow Plugin laden -->
<script type="text/JavaScript" src="js/jquery.flow.1.2.min.js"></script>
</body>

Zuguterletzt fehlt noch die Initialisierung des jFlow Plugins. Dies passiert durch ein paar Zeilen JavaScript:

<script type='text/javascript'>
$(function() {
	$('section#jFlow_slider').jFlow({
		slides: '#slides',
		width: '300px',
		height: '316px'
	});
});
</script>

Mit $('section#jFlow_slider') benennen wir den Container, in dem sich die zu slidenen Bilder befinen. Wenn wir ihn oben nicht jFlow_slider genannt hätten, sondern jFlow_komplett_anders, dann müsste dieser Codeschnipsel $('section#jFlow_komplett_anders') heißen. D. h. hier sprechen wir den Bereich unserer HTML-Datei an, welcher sowohl die Bilder zum Sliden, als auch die Controls in Form unserer Thumbnails enthält.

In Zeile 4 benennen wir noch den Bereich, in dem sich nur die Bilder exklusive der Controls befinden. In den Zeilen 5 und 6 spezifizieren wir schließlich, welche Dimensionen die Bilder haben.

Allen, die sich ausführlicher mit jFlow beschäftigen wollen, sei Simon Rimkus’ Blog webdemar.com ans Herz gelegt. Hier beschreibt er in einem sehr guten Blogpost ausführlich, wie man mit jFlow umgeht.

Damit ist alles fertig und sowohl Zoom-Effekt, als auch Slideshow funktionieren.

Hier kannst du den kompletten Quellcode des Beispiels herunterladen. Wie immer bei gut gemachtem jQuery-Code gilt auch hier: Das Ding läuft auch in jedem Asi-Browser, wie z. B. dem IE6 :)

Verschlagwortet mit ,

2 Antworten auf Abgefahrene Hover Zoom Produkt Präsentation mit jQuery

  1. Tamer sagt:

    Tolles Feature. Danke für den Artikel. Wird sicherlich demnächst eine Anwendung bei mir finden.

  2. Mimi sagt:

    Danke für den Superartikel, war mir sehr hilfreich für eine eigene Präsentation. Leider gibt diesen schönen Slideffekt im Frontlineshop nicht mehr, aber Dein eigenes Beispiel verdeutlicht es ja genauso gut.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>