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.

Jetzt kostenlos registrieren!

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 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 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.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

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.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

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
Jetzt informieren Trailer ansehen

Kommentare

  • Portrait von centipete

    centipete

    31.10.2010 - 14:18

    besten dank! eine gute & übersichtliche zusammenfassung.

  • Alternative Portrait von Ordinger

    Ordinger

    30.10.2010 - 13:10

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

  • Alternative Portrait von ikey

    ikey

    29.10.2010 - 18:53

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

  • Alternative Portrait von chesterli

    chesterli

    29.10.2010 - 10:43

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

  • Alternative Portrait von Oschick

    Oschick

    29.10.2010 - 10:36

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

  • Alternative Portrait von nakoda

    nakoda

    29.10.2010 - 09:47

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

  • Alternative Portrait von Lordi

    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

    Sibulan1

    26.10.2010 - 00:09

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

  • Alternative Portrait von B00mer

    B00mer

    25.10.2010 - 22:05

    Mal schauen wie ich das einsetzen kann. Danke!

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.


vBulletin 0.055 • ZF-App 1.425 • Total 1.48