Anzeige
Tutorialbeschreibung

jQuery - Bildergalerien mit einem Zoom-Effekt ausstatten

jQuery - Bildergalerien mit einem Zoom-Effekt ausstatten

Im Rahmen dieser jQuery-Tutorialreihe auf PSD-Tutorials.de wurden bereits mehrfach Möglichkeiten vorgestellt, wie sich Bildergalerien mittels jQuery aufbauen lassen. Noch interessanter wird das Ganze, wenn die Galerien mit zusätzlichen Effekten ausgestattet werden. Sehr beliebt ist hier der sogenannte Fancy-Effekt. Dabei werden die Bilder zunächst als Thumbnails angezeigt. Wird mit dem Mauszeiger über diese Thumbnails gefahren, vergrößern sich die Grafiken automatisch. Wie sich dieser Effekt anwenden lässt, wird in diesem Tutorial anhand zweier typischer Anwendungen gezeigt.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Bevor Schritt für Schritt der Aufbau einer Bildergalerie mit zusätzlichem Fancy-Effekt beschrieben wird, zunächst ein Blick auf das Endergebnis des ersten Beispiels.

[Beispiel anzeigen]
Hier zunächst die Seite, wenn sie aufgerufen wird:

Bilder



 
Und nun wird mit dem Mauszeiger über eine Grafik gefahren:

Bilder



 
Eine solche Galerie lässt sich mit der bekannten Kombination aus HTML, CSS und jQuery vergleichsweise einfach aufbauen. Dafür muss man zunächst die Grafiken anlegen. Das geschieht im vorliegenden Beispiel mittels ungeordneter Liste. Dabei wird für jedes Bild ein eigener Listeneintrag erzeugt.
 
&<li><a href="bild1.jpg"><img src="thumb1.jpg" alt="" /></a></li> 
Insgesamt könnte der Grundaufbau der Galerie also folgendermaßen aussehen:
<div class="galerie">
   <ul class="thumb">
     <li><a href="bild1.jpg"><img src="thumb1.jpg" alt="" /></a></li>
     <li><a href="bild2.jpg"><img src="thumb2.jpg" alt="" /></a></li>
     <li><a href="bild3.jpg"><img src="thumb3.jpg" alt="" /></a></li>
     <li><a href="bild4.jpg"><img src="thumb4.jpg" alt="" /></a></li>
   </ul>
  …
</div> 

Zusätzlich muss ein div-Bereich angelegt werden. In diesem wird später die aktuell angeklickte Grafik in voller Größe angezeigt.
& <div id="vollbild"> <a href="x"><img src="bild1.jpg" alt="" /></a> </div> 

Hier sollten Sie ein Bild fest definieren. Dieses Bild wird direkt nach dem Aufrufen der Seite angezeigt. Das Austauschen des Bildes geschieht dann dynamisch, nämlich durch Anklicken der Thumbnails. Weiter geht es mit den CSS-Definitionen. Hier gibt es keine weiteren Besonderheiten.
 
<style type="text/css">
 /* <![CDATA[ */
 img {
             border: none;
 }
 .galerie {
             height: 360px;
             width: 910px;
             margin: -180px 0 0 -450px;
             top: 50%;
             left: 50%;
             position: absolute;
 }
 ul.thumb {
             float: left;
             list-style: none;
             margin: 0;
             padding: 10px;
             width: 360px;
 }
 ul.thumb li {
             margin: 0;
             padding: 5px;
             float: left;
             position: relative;
             width: 110px;
             height: 110px;
 }
 ul.thumb li img {
             width: 100px;
             height: 100px;
             border: 1px solid #ddd;
             padding: 5px;
             background: #f0f0f0;
             position: absolute;
             left: 0;
             top: 0;
 }
 #vollbild {
             float: left;
             padding: 9px 0;
             margin-left: -10px;
 }
  /* ]]> */
 </style>

Viel interessanter ist da schon die jQuery-Syntax, die letztendlich für die Funktionalität der Galerie sorgt.

[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
 $("ul.thumb li").hover(function() {
             $(this).css({'z-index' : '10'});
             $(this).find('img').addClass("hover").stop()
                         .animate({
                                    marginTop: '-110px', 
                                    marginLeft: '-110px', 
                                    top: '50%',
                                    left: '50%', 
                                    width: '174px',
                                    height: '174px',
                                    padding: '20px' 
                         }, 200);
             
             } , function() {
             $(this).css({'z-index' : '0'});
             $(this).find('img').removeClass("hover").stop()
                         .animate({
                                    marginTop: '0', 
                                    marginLeft: '0',
                                    top: '0', 
                                    left: '0', 
                                    width: '100px',
                                    height: '100px', 
                                    padding: '5px'
                         }, 400);
 });
  
             $("ul.thumb li a").click(function() {
                         
                         var mainImage = $(this).attr("href"); 
                         $("#vollbild img").attr({ src: mainImage });
                         return false;                
             });
  
 });
 /* ]]> */
</script

Wie üblich, wird zunächst dafür gesorgt, dass die Funktion tatsächlich erst dann ausgeführt werden kann, wenn das DOM vollständig geladen ist.
$(document).ready(function(){
 …
}

Über
$("ul.thumb li").hover(function() {
 …
}

wird festgelegt, dass die Funktion im Hover-Status ausgeführt werden soll. Über die anschließende Anweisung wird dem jeweils aktuellen Bild der z-Index-Wert 10 zugewiesen. Das soll die Anzeige des aktuellen über den restlichen Bildern der Galerie garantieren.
$(this).css({'z-index' : '10'})

Sollten Sie bislang keine Erfahrungen mit der CSS-Eigenschaft z-index gesammelt haben, finden Sie beispielsweise auf der Seite http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index weiterführende Informationen dazu.

animate() wurde bereits mehrfach im Laufe dieser jQuery-Reihe hier auf PSD-Tutorials.de vorgestellt. Die darin enthaltenen Eigenschaften legen fest, wie das Hover-Bild letztendlich angezeigt werden soll. Im vorliegenden Beispiel werden u.a. die Startpositionen von links und rechts sowie die Breite und Höhe der Grafiken angepasst. Experimentieren Sie hier einfach mit den Werten, bis das für Sie optimale Ergebnis erreicht ist. Weiterführende Informationen von offizieller jQuery-Seite finden Sie unter http://api.jquery.com/animate/.

Durch das Anklicken eines Thumbnails soll das Bild jeweils in voller Größe angezeigt werden. Dafür wurde innerhalb der HTML-Syntax der div-Bereich mit der ID vollbild definiert. Dem innerhalb dieses Bereichs angelegten img-Element wird durch Anklicken eines der Thumbnails jeweils dessen Bildname zugewiesen und somit an der betreffenden Stelle das gewählte Bild angezeigt.

Weitere Angaben sind zum Anlegen einer Galerie mit integriertem Fancy-Effekt nicht nötig. Im folgenden Abschnitt wird eine weitere klassische Anwendung vorgestellt.


Fancy Zoom

Ebenfalls um einen Fancy-Effekt geht es im zweiten Beispiel dieses Tutorials. Dabei kommt das jQuery-Plug-in Fancy Zoom zum Einsatz. Ausführliche Informationen zu diesem Plug-in finden Sie auf der offiziellen Projektwebseite unter http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/. Werfen Sie zunächst einen Blick darauf, was durch Fancy Zoom möglich ist:

[Beispiel anzeigen]
So sieht die Seite normalerweise aus:

Bilder



 
Und so nach dem Anklicken der Grafik:

Bilder



 
Die angeklickte Grafik wird also herangezoomt und kann anschließend über das entsprechende Kreuz geschlossen werden. Um eine solche Anwendung zu erstellen, laden Sie sich zunächst das Plug-in von der genannten Webseite herunter. Anschließend binden Sie jQuery und Fancy Zoom in ihre Webseite ein. Achten Sie darauf, zunächst jQuery und erst danach Fancy Zoom aufzurufen. Nur dann arbeitet das Plug-in.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancyzoom.js"></script>

Die Bilder werden jeweils nach folgendem Schema eingebunden:
<a href="image1.jpg"><img src="thumb1.jpg" alt="" /></a>

Dabei wird dem src-Attribut des img-Elements die kleine Version des Bildes zugewiesen. Auf die Quelle des Bildes in Originalgröße verweist der Hyperlink. Auf diese Weise können Sie alle Bilder einbinden, die angezeigt werden sollen.

Was jetzt noch fehlt, ist das eigentliche Skript. Dieses lässt sich denkbar einfach nutzen. Hier eine klassische Anwendung von Fancy Zoom: (Zum besseren Verständnis wurden die verwendeten Optionen mit Kommentaren versehen).
<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function(){
             
 //Geben Sie hier das Verzeichnis der Plug-in-Grafiken an.
 //Diese Grafiken (closebtn.png, blank.gif, loading images ....) werden
 //vom Plug-in mitgeliefert.
 //Der Pfad muss unbedingt mit einem / beendet werden.
 $.fn.fancyzoom.defaultsOptions.imgDir='../images/';
 // Es werden alle Links mit dem Effekt ausgestattet
 $('#gallery a').fancyzoom(); 
 // Es werden alle Links ausgewählt, die die Klasse tozoom besitzen.
 //Die Animationszeit wird auf 1000 festgelegt.
 $('a.tozoom').fancyzoom({Speed:1000});
 // Es werden alle Links ausgewählt, die die Klasse tozoom besitzen.
 //Diesen Links wird eine Deckkraft von 0.8 zugewiesen.   
 $('a').fancyzoom({overlay:0.8});
 //Der Zoom-Effekt wird nun auf die Bilder angewendet, die die Klasse 
 //fancyzoom besitzen.
 $("img.fancyzoom").fancyzoom();
 });
/* ]]> */
</script> 

Das Plug-in kann mit zusätzlichen Optionen gesteuert werden. Diese werden aber normalerweise nicht benötigt. Sollten Sie diese dennoch einsetzen wollen, finden Sie auf der Seite http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/ weiterführende Informationen dazu.


Fazit

Die beiden Beispiele haben gezeigt, wie einfach sich Bildergalerien mit einem Zoom- bzw. Fancy-Effekt ausstatten lassen.
 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Niobe
  • 28.09.2010 - 13:05

Gefällt mir ausgezeichnet, ich hoffe, dass ich es schaffe und auf meine HP einbinden kann.

Portrait von plastichand
  • 25.09.2010 - 18:54

super!
vielen dank für den tut

viele grüße

Portrait von hs1
hs1
  • 25.09.2010 - 12:40

Interessant für Webmaster. Funktioniert gut.

Portrait von madman6666
  • 24.09.2010 - 22:52

Einfach toll ... muss ich gleich mal testen ;-)

Portrait von befi
  • 24.09.2010 - 14:40

Wunderbar ... kann man auf jeden Fall brauchen!

Portrait von flyjoker
  • 24.09.2010 - 07:39

Perfekt! Danach habe ich auch gesucht. Vielen Dank!

Portrait von Hannes1709
  • 23.09.2010 - 15:20

Super, das habe ich schon lange gesucht.

Portrait von Tilo_R
  • 23.09.2010 - 14:45

Ausgezeichnet. Das kann ich gut gebrauchen. Danke.

Portrait von eddybaer
  • 23.09.2010 - 11:04

Schönes Tut! Und immer wieder toll: klickbare Beispiele zu haben, die den Effekt sofort vorführen. Danke!

x
×
×