-
jQuery - Bildergalerien mit einem Zoom-Effekt ausstatten
23.09.2010 in Javascript-Frameworks von daniel_koch
- Kategorie: Javascript-Frameworks
- Erstellt mit Programmversion: 1.4
- Kompatibel ab Programmversion: 1.4
- Dateigröße (PDF): 1.4 MB
- Bisherige Zugriffe: 1956
Tipp: Dieser Inhalt befindet sich auch auf der:
Lieber Gast …
… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.
Vorteile der kostenlosen Mitgliedschaft
Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:
- PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
- Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
- Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
- Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
- Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
- Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
Reinschnuppern als Gast
Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.
- Download: Sepia-Vintage-Effekt-Aktion
- Download: Spiegelungen 2
- Download: Vektor-Logo (Eidechse)
- Tutorial: Linien zum Glühen bringen
- Tutorial: Ballons aus einer Schublade
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
- Videotraining: Lichtscheinkontureneffekt mit Animation
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
Das Punktesystem
Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.
Passend zum Inhalt empfehlen wir unsere:
Photoshop-Workshop-DVD - Webdesign
- Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
- Umsetzung erstellter Weblayouts in HTML/CSS
- Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Tutorial empfehlen
Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)
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:
&<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:
<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.
-
Reklame
-
-
- Fotobüchern
- Umrandung um Textfeld
- Kanten glätten bei meinem Bild oder Vektor?
- After Effects Ram-Vorschau - Problem mit Cache (aktualisert nicht)
- blender render stürzt ständig ab
- jQuery - Größe von einem Frameset ändern?
- [CS5] "Löschen-Mitteilung"
- Zerissenes Foto
- Biete Programmierung Ihres PSD-Designs
- Fehler beim Platzieren von Bildern
- Zeilenumbruch CS4
- Gestaltung eines Logos
- Kaufberatung Drucker
- Dynamische Auswahlliste: Name und ID übergeben
- Adobe Encore - Probleme Schaltflächen Unterbild
- 2 Fotos mit unterschiedlichem Schlagschatten in einer Datei
- Copyright-Frage - öffentliche Veranstaltung
- Photoshop auf Mini Lappi
- Link auf Anker - Firefox Problem
- Auftrag: Individuelle Flash-Gallerie
-
-
Aktuelles Commag
Anzeige
-
DarkSide
-
Anzeige
Niobe
28.09.2010 - 13:05
Gefällt mir ausgezeichnet, ich hoffe, dass ich es schaffe und auf meine HP einbinden kann.
plastichand
25.09.2010 - 18:54
super!
vielen dank für den tut
viele grüße
hs1
25.09.2010 - 12:40
Interessant für Webmaster. Funktioniert gut.
madman6666
24.09.2010 - 22:52
Einfach toll ... muss ich gleich mal testen ;-)
befi
24.09.2010 - 14:40
Wunderbar ... kann man auf jeden Fall brauchen!
flyjoker
24.09.2010 - 07:39
Perfekt! Danach habe ich auch gesucht. Vielen Dank!
Hannes1709
23.09.2010 - 15:20
Super, das habe ich schon lange gesucht.
Tilo_R
23.09.2010 - 14:45
Ausgezeichnet. Das kann ich gut gebrauchen. Danke.
eddybaer
23.09.2010 - 11:04
Schönes Tut! Und immer wieder toll: klickbare Beispiele zu haben, die den Effekt sofort vorführen. Danke!