Tutorialbeschreibung

jQuery - Bilder effektvoll präsentieren

jQuery - Bilder effektvoll präsentieren

Gerade auch auf psd-tutorials.de finden sich immer wieder Links auf Webseiten, die Bildergalerien anbieten. Nun kann man Bilder bekanntermaßen ganz unterschiedlich präsentieren. Wer genug hat vom Einheitsbrei, sollte einmal einen Blick auf das Plug-in jQuery Cycle werfen. Denn damit lassen sich Bilder tatsächlich eindrucksvoll in Webseiten einbinden, und das mit erstaunlich wenig Aufwand.


Für jQuery gibt es unzählige Plug-ins, mit denen sich Bildergalerien aufbauen bzw. Bilder ansprechend präsentieren lassen. In diesem Tutorial fiel die Wahl auf JQuery cycle. Dank dieses Plug-ins können Sie Bilder mit unterschiedlichen Effekten ausstatten. Die möglichen Effekte reichen dabei von Zoomen über Drehen bis hin zum Scrollen. Einen ersten Eindruck von der Vielzahl der angebotenen Effekte kann man sich auf der Seite http://jquery.malsup.com/cycle/ verschaffen.

Bilder


 
Von der genannten Seite kann die Plug-in-Datei heruntergeladen werden. Alternativ dazu bietet sich das Einbinden der Bibliotheken über die bekannte Google Libraries API und die Projektwebseite des Plug-ins an. Ein entsprechender Aufruf im head-Bereich der Seite könnte somit folgendermaßen aussehen:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

Das Plug-in ist alleine nutzbar, es unterstützt aber auch die beiden jQuery-Plug-ins Metadata und Easing. (Beide Plug-ins werden in diesem Tutorial jedoch keine Rolle spielen).

Um mit dem Plug-in arbeiten zu können, wird zunächst ein div-Bereich angelegt. In diesem Bereich definiert man dann beispielsweise die verschiedenen Grafiken. Diese Grafiken werden allerdings nicht neben- oder untereinander angezeigt. Vielmehr ist zunächst lediglich ein Bild zu sehen. Die anderen werden mittels einer Slideshow nacheinander präsentiert.
<div class="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
</div>

Im nächsten Schritt wird der div-Bereich mittels CSS formatiert. Durch die folgende Syntax weist man der Galerie u.a. einen Rahmen zu. Das CSS selbst übernimmt lediglich gestalterische Aufgaben.
<style type="text/css"> 
/* <![CDATA[ */
 .slideshow { height: 232px; width: 232px; margin: auto }
 .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
/* ]]> */
</style>

Entscheidend ist der Inhalt des eigentlichen Skripts. Im einfachsten Fall lässt sich das Plug-in folgendermaßen nutzen:

[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function() {
     $('.slideshow').cycle({
                         fx: 'fade'         
    });
 });
 /* ]]> */
 </script>

 
Neben dem hinlänglich bekannten ready() wird die Klasse angegeben, auf deren Inhalt das Plug-in angewendet werden soll. Innerhalb der geschweiften Klammern können dann Optionen definiert werden, die die Funktionsweise des Plug-ins steuern. Am wichtigsten ist dabei zweifellos fx. Dieser Option weist man den Effekt zu, der auf die Bilder angewendet werden soll. Das Plug-in beherrscht sehr viele Effekte. Welche das sind, zeigt die folgende Liste:
  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

 
Da die Beschreibung der einzelnen Effekte etwas schwierig ist, verweise ich an dieser Stelle gerne auf den jQuery Cycle Plugin - Effects Browser, der auf der Seite http://jquery.malsup.com/cycle/browser.html zu finden ist.

Bilder


 
Auf dieser Seite können Sie sämtliche Effekte direkt ausprobieren und anschließend selbst entscheiden, welche der angebotenen Varianten Sie einsetzen wollen.

Sie müssen sich übrigens nicht auf einen Effekt festlegen. Das Plug-in erlaubt nämlich auch die Definition mehrerer Effekte. Dafür müssen die gewünschten Effekte jeweils durch Kommata getrennt notiert werden.

[Beispiel anzeigen]
<script type="text/javascript"> 
/* <![CDATA[ */
 $(document).ready(function() {
     $('.slideshow').cycle({
            fx: 'fade, scrollHorz, cover, zoom, turnLeft' 
    });
 });
 /* ]]> */
</script>

Die angegebenen Effekte werden dabei nacheinander abgearbeitet.

Nun ist fx längst nicht die einzige Option, die angegeben werden kann. Wie viele Optionen tatsächlich zur Verfügung stehen, zeigt ein Blick auf die Seite http://jquery.malsup.com/cycle/options.html. Interessant sind dort vor allem die aufgeführten Standardwerte.

Bilder


 
Diese werden vom Plug-in automatisch angewendet, wenn nichts Gegenteiliges notiert wurde. So ist der Standardwert für die Option speed auf 1000 festgelegt. Über speed wird die Geschwindigkeit des angegebenen Effekts bzw. des Effekt-Übergangs bestimmt. Der Wert 1000 ist hier als Millisekunden-Angabe zu verstehen. Will man den Übergang etwas langsamer gestalten, setzt man die Option speed ein und weist dieser einen höheren Wert zu. Das könnte folgendermaßen aussehen:

[Beispiel anzeigen]
<script type="text/javascript"> 
 /* <![CDATA[ */
 $(document).ready(function() {
     $('.slideshow').cycle({
             fx: 'fade', 
             speed: 2500
    });
 });
  /* ]]> */
 </script>

Durch den Wert 2500 wird die Standardeinstellung 1000 für die speed-Option überschrieben. Auf die gezeigte Weise können Sie sämtliche unter http://jquery.malsup.com/cycle/options.html aufgeführten Optionen einsetzen und die Standardwerte anpassen.

Alle Optionen können in diesem Tutorial nicht vorgestellt werden. Einige verdienen aber dennoch eine genauere Betrachtung. Da wäre zunächst der shuffle-Effekt. Durch diesen Effekt werden die Bilder mit einem Blättereffekt ausgestattet.

[Beispiel anzeigen]
<script type="text/javascript">  
 /* <![CDATA[ */
 $(document).ready(function() {
     $('.slideshow').cycle({
          fx: 'shuffle', 
    });
 });
  /* ]]> */
 </script>

Interessant ist darüber hinaus die Anpassung der Koordinaten der Bilder. Denn die Bilder lassen sich verschieben. Auch hierzu wieder ein Beispiel.

[Beispiel anzeigen]
<script type="text/javascript"> 
 /* <![CDATA[ */
 $(document).ready(function() {
     $('.slideshow').cycle({
                 fx: 'shuffle', 
                  shuffle: {
         top: 400,
         left: 280
                         },    
    });
 });
  /* ]]> */
 </script>

Achten Sie hier besonders auf die Syntax hinsichtlich des shuffle-Effekts. Denn dieser Effekt wird zunächst ganz normal über fx: 'shuffle' angegeben. Interessant sind dann allerdings die nächsten Zeilen. Denn dort werden dem shuffle-Effekt die beiden Optionen top und left zugewiesen. Darüber lassen sich die Koordinaten des Effekts anpassen. Die verwendeten Werte 400 und 280 werden dabei als Pixelangaben interpretiert.

 
Bislang wurden die Bildwechsel immer automatisch durchgeführt. Das ist so natürlich nicht immer gewünscht. Das Plug-in bietet daher die Möglichkeit, den Bildwechsel per Mausklick selbst auszulösen. Dafür muss man zunächst eine kleine Navigation anlegen. Die könnte im einfachsten Fall folgendermaßen aussehen:
<div class="nav"> 
 <a id="prev" href="#">Vorheriges</a> 
 <a id="next" href="#">Nächstes</a>
</div>

Den Links wird dabei jeweils eine ID zugewiesen, auf die später im eigentlichen Skript zugegriffen werden kann. Nun können die eigentlichen Bilder definiert werden.
<div id="s1" class="pics"> 
 <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
 <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
 <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
</div>

Was jetzt noch fehlt, ist das Skript.

[Beispiel anzeigen]
<script type="text/javascript">  
/* <![CDATA[ */
 $(document).ready(function() {
    $('#s1').cycle({
     fx: 'scrollHorz',
     prev: '#prev',
     next: '#next',
     timeout: 0 
    });
 });
/* ]]> */
</script>

Entscheidend für die Navigation sind die beiden Optionen prev und next, denen die IDs der Hyperlinks zugewiesen werden. Dabei ist prev für die Anzeige des vorherigen Bildes zuständig, während next das nächste Bild einblendet.



DVD-Werbung

Passend zum Inhalt empfehlen wir: Photoshop-Workshop-DVD - Webdesign

Verwandle deine Stylevorlage! Dieses Webdesign-Training für Photoshop stellt mit seinen 32 Stunden Video-Training und diversen Text-Workshops eine breite Basis dar, um deine Inhalte meisterhaft ins Web zu transportieren!

  • Webdesign mit Photoshop: alle erstellten Layouts mit PSD-Arbeitsdateien
  • Umsetzung erstellter Weblayouts in HTML/CSS und jQuery
  • SEO-Tipps vom Feinsten zur Suchmaschinenoptimierung

Bring Pep ins Web! Mit diesem Training erhältst du für bestes Webdesign das richtige Know-how!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von krambambuli74
  • 05.02.2015 - 15:19

Moin, leider funktioniert es bei mir nicht. und die Beschreibung wo genau die scripts eingesetzt werden sollen fehlt mir. Egal ob ich es im oder am Ende des html setze - es funktioniert nicht - schade

Portrait von schraubergott
  • 07.01.2014 - 23:33

Auch hier vielen Dank für dieses Tutorial.

Portrait von centipete
  • 31.10.2010 - 14:18

besten dank! eine gute & übersichtliche zusammenfassung.

Portrait von Ordinger
  • 30.10.2010 - 13:10

Hört sich gut an! Werde ich gleich mal testen!

Portrait von ikey
  • 29.10.2010 - 18:53

Danke für das Tutorial, sehr anschaulich und übersichtlich präsentiert.

Portrait von chesterli
  • 29.10.2010 - 10:43

sehr schönes tool, ich werds in meine seite einbauen...

Portrait von Oschick
  • 29.10.2010 - 10:36

Vielen Dank. Kann ich gut gebrauchen. Ich finde sowieso dass jQuery das beste Javascript-Framework ist.

Portrait von nakoda
  • 29.10.2010 - 09:47

Schaut gut das ganze. Mal sehen wie man es verwenden kann.

Portrait von Lordi
  • 27.10.2010 - 11:26

macht nen guten Eindruck, und kann man sicherlich auf der ein oder anderen Seite mal einbauen. Danke für den Tip

Portrait von Sibulan1
  • 26.10.2010 - 00:09

Danke fuer den Tip, werde schauen ob ich dies ein der website einbauen kann

Portrait von B00mer
  • 25.10.2010 - 22:05

Mal schauen wie ich das einsetzen kann. Danke!


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×