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 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.

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.

Jetzt kostenlos registrieren!

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

Kommentare

  • Portrait von FrauFlamme

    FrauFlamme

    15.08.2011 - 19:14

    Gefällt mir auch total gut und sieht auch schick aus im Firefox. Aber leider nicht im IE. Hast Du noch einen Tipp, wie man das auch für den IE hinbekommt? Danke!

  • Alternative Portrait von Lordi

    Lordi

    29.06.2011 - 04:54

    Danke für dieses doch recht ausführliche tut. Die 10 Punkte haben sich gelohnt.

  • Alternative Portrait von dmoritz

    dmoritz

    28.02.2011 - 11:50

    Danke für dieses Tutorial.
    Ich hab schon das Ein-Oder-Andere mit jQuery probiert, das war allerdings nicht soo von Erfolg gekrönt. Aber ich denke ich sollte mich da mal genauer einlesen, das scheint äußerst effektiv.
    Und funktioniert obendrein auch noch in allen gängigen Browsern (inklusive iPad).
    Sehr schön.

  • Alternative Portrait von Tragg0r

    Tragg0r

    10.02.2011 - 11:30

    Hi,

    sry für den Doppelpost aber ich hab Angst das der Eintrag sonst unter geht:

    Ich bin noch nicht wirklich fit in Sachen außerhalb von HTML und CSS:

    Eingebunden wird hier dieses schöne Teil bzw. die Bilder per <div> und dann die Auflistung der einzelnen Bilder </div>...
    Ich möchte auf meine Homepage öfter mal neue Bilder einbinden und hab dann kein Lust da jedesmal im Code rummzufuschen, kann ich mir da nicht was auf Basis von Php + Datenbank basteln?

    Also das in dem <div> nicht die Bilder aufgelistet werden, sondern im <div> php mittels include eingebunden wird und ich dann mittels einer Adminoberfläche Bilder hochlade.

    Oder funktioniert dann der jQuery-Slider nicht mehr?

    Wäre der Aufwand groß eine Bilderdatenbank und die dazugehörige Adminoberfläche zu basteln?

    Wäre euch Dankbar für ein paar Infos ob das generell möglich ist, dann würde ich mich da mal dran versuchen!!

  • Alternative Portrait von Tragg0r

    Tragg0r

    08.02.2011 - 16:05

    Richtig geil! Danke für das Tutorial.

  • Alternative Portrait von Talisac

    Talisac

    28.01.2011 - 07:44

    Echt Klasse ich bin hin und weg!!!
    gleich mal wo rein bringen

  • Alternative Portrait von MeiSeed

    MeiSeed

    26.01.2011 - 11:45

    Sehr Schönes Tutorial, danach habe ich schon gesucht.

  • Alternative Portrait von nellynelly

    nellynelly

    23.01.2011 - 20:11

    Danke für dieses Tutorial. Werde ich auch ausprobieren.

  • Alternative Portrait von chaoskurt

    chaoskurt

    22.01.2011 - 21:30

    Danke für dieses Tutorial ! Werde mal testen ob sich das auch in Joomla anwenden lässt.

  • Alternative Portrait von s-worx

    s-worx

    21.01.2011 - 12:36

    Danke für das Turorial! Durch die Beschreibung sehr einfach einzupflegen ;)

  • Alternative Portrait von romox

    romox

    16.01.2011 - 19:47

    Habe ich etwas übersehen, oder fehlt hier eine Live-Demo?
    Beim nächsten Mal unbedingt beachten ;-)

  • Alternative Portrait von akpotosufredrick

    akpotosufredrick

    16.01.2011 - 16:54

    sieht echt viel aus. aber danke

  • Portrait von energie95

    energie95

    15.01.2011 - 16:02

    Super Tutorial! Sofort auf meine Seite eingebaut - Prima, Danke!

  • Alternative Portrait von jackmacneill

    jackmacneill

    14.01.2011 - 21:48

    Dieses Tutorial gefällt mir! Danke!

  • Portrait von ArnoPl

    ArnoPl

    12.01.2011 - 13:24

    Die show ist gut, aber ich habe sie eingebaut aber sie funst nicht im IE!
    Was könnte das denn sein!? Im firefox läuft sie Klasse!

    VG Arno

  • Alternative Portrait von blizzart88

    blizzart88

    10.01.2011 - 12:20

    Sehr schönes Tutorial, werde ich mal ausprobieren.
    Danke

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

Tutorial empfehlen

 

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


01.

Öffnet in Dreamweaver ein neues HTML-Dokument.


02.

Tragt nun nach Belieben in den title ein, was später oben im Explorer stehen soll; zum Beispiel:
<title>Meine_Cycle-Slider</title>

03.

Fügt nun darunter den folgenden Quelltext unter dem title ein:
<style type="text/css">
     .slideshow img { padding: 2px; border: 1px solid #000; background-color: #fff; }    <!--  padding und border (Rahmen) eurer Bilder  -->

</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
     $('.slideshow').cycle({

          fx: 'fade' // Wählt hier einen Übergang, zB: fade, shuffle, zoom, turnDown, curtainX, etc.

     });
});
</script>

• Padding und Border, die den Bilderrahmen angeben, müssen nicht unbedingt sein und können auch gelöscht oder auf 0 gestellt werden.

Bei fx könnt ihr den Übergang nach Belieben verstellen, indem ihr die entsprechenden Worte einsetzt, wie z.B.: fade, shuffle, zoom, turnDown, curtainX, etc.


04.

In den Body fügt ihr folgenden Text ein:
<div class="slideshow">
     <img src="img/01.jpg" width="720" height="225"/>
     <img src="img/02.jpg" width="720" height="225"/>
     <img src="img/03.jpg" width="720" height="225"/>
     <img src="img/04.jpg" width="720" height="225"/>
</div>

Setzt hier die Links der Bilder hinein, die in eurer Slideshow vorkommen sollen. Die Anzahl der Bilder ist beliebig und auch die Größe ist definierbar. Passt diese Werte euren Bildern und Contents an.

Euer Ergebnis müsste (je nach Bild und Formatwahl) nun so aussehen und überblenden:

Bilder


 

05.

Auf diese Art und Weise könnt ihr entweder einen Banner mit überblendenden Bildern erstellen oder mehrere Bilder in einer Slideshow auf wenig Platz unterbringen.

Bilder


 

06.

Es gibt viele verschiedene Möglichkeiten, Übergänge zu gestalten. Hier sind einige Beispiele:

Setzt in den folgenden Bereich nach fx statt dem xxx eine der vielen Varianten:
$('.slideshow').cycle({
     fx: 'xxx'
});

• Überblende:
fx: 'fade'
Bilder


• Nach unten klappen:
fx: 'turnDown'
oder
fx: 'turnUp'
oder
fx: 'turnLeft'

oder
fx: 'turnRight'

Bilder


 
• Drehen:
fx: 'curtainX'
oder
fx: 'curtainY'

Bilder


X/Y beschreibt die Achse, in der sich das Bild drehen soll.
"X"= waagerecht
"Y"= senkrecht

 
• Scrollen:
fx: 'scrollRight'
oder
fx: 'scrollLeft'
oder
fx: 'scrollUp'
oder
fx: 'scrollDown'

Bilder


• Right /Left /Up /Down beschreibt die Richtung, in der sich die Bilder bewegen sollen.

 

• Zoomen:
fx: 'zoom'

Bilder


• Hinten einordnen:
fx: 'shuffle'

Bilder


 

• Einblende:
fx: 'blindX'
oder
fx: 'blindY'
oder
fx: 'blindZ'

Bilder


"X" = waagerecht
"Y" = senkrecht
"Z" = diagonal


• Zoomen mit Überblende:
fx: 'fadeZoom'

Bilder


 
• Wechsel:
fx: 'uncover'

Bilder


• Diagonaler Wechsel:
fx: 'wipe'
Bilder


07.

Ihr könnt auch eine beliebige Schnelligkeit des Wechsels wählen, indem ihr einfach eine Zeile unter „fx“ mit der Geschwindigkeit schreibt. Z. B.:
fx:    'fade', 
speed:  2500

So dauert die Animation beispielsweise insgesamt 2,5 Sekunden.


 

08.

Ihr könnt auch die Zeit einzeln definieren, in der das entsprechende Bild ohne Übergang gezeigt wird, indem ihr ein Timeout zusätzlich einsetzt.
fx:    'fade',
speed:    300,
timeout:  2000

So läuft die Animation - hier fade - sehr schnell ab, und das Bild bleibt eine längere Zeit sichtbar.


09.

Nun könnt ihr eine Pause einfügen, wenn der Cursor sich über dem Bild befindet, indem ihr in einer neuen Zeile einfach eine Pause hinzufügt. Dabei ist es egal, ob ihr eigene Einstellungen in Schnelligkeit etc. vorgenommen habt.
fx:    'fade',
pause:  1,
speed:    300,
timeout:  2000

Wichtig ist nur, dass hinter jeder Aufzählung ein Komma steht, sonst funktioniert dies alles nicht.


10.

Ihr könnt die Bilder auch in Random-Einstellung wechseln lassen, wenn sie keine feste Ordnung besitzen sollen.

fx:    'fade',
random:  1


11.

Die Entfernung von der shuffle-Einstellung kann natürlich auch geändert werden:
fx:   'shuffle',
shuffle: {
top:  -230,
left:  230 }

So kann eine bestimmte Richtung und Entfernung nach Wunsch eingehalten werden.


 

12.

Wenn die Bildabfolge durch Klick gewechselt werden soll, benötigt ihr folgende Einstellung:
fx:     'fade',
speed:  300,
next:   '.slideshow',
timeout: 0

13.

fx:     'fade', 
speed:   300, 
timeout: 3000, 
next:   '.slideshow', 
pause:   1

Auch eine Pause ist möglich, wenn der Cursor sich auf dem Bild befindet.


14.

Jedes Element des <div>-Containers bekommt diesen Effekt. Daher funktioniert dies auch mit Text oder Text/Bild-Blöcken.

Bilder


 

15.

Wichtig ist bei mehreren Bildergalerien auf einer Seite, dass ihr eine entsprechende Benennung einsetzt.

Die verschiedenen Slideshows müssen entsprechend mit beispielsweise s1 und s2 gekennzeichnet sein.
<script type="text/javascript">
$(document).ready(function() {
     $('.s1').cycle({
          fx: 'fade'
     });
     $('.s2').cycle({
          fx: 'zoom'
     });
});
</script>

Bei der Definierung des borders und paddings z. B.:
<style type="text/css">
.s1 img { padding: 15px; border: 1px solid #fff; background-color: #000; }
.s2 img { padding: 20px; border: 2px solid #ccc; background-color: #eee; }

Und natürlich müssen auch die entsprechenden Bilder- oder Text-Container zugewiesen werden. Z. B.:
<div class="s1">
     <img src="img/01.jpg" width="720" height="225"/>
     <img src="img/02.jpg" width="720" height="225"/>
     <img src="img/03.jpg" width="720" height="225"/>
</div>
<div class="s2">
     <img src="img/04.jpg" width="720" height="225"/>
     <img src="img/05.jpg" width="720" height="225"/>
     <img src="img/06.jpg" width="720" height="225"/>
</div>

Ich bedanke mich für das Interesse an diesem Tutorial und wünsche viel Spaß beim Ausprobieren.
vBulletin 0.034 • ZF-App 0.463 • Total 0.497