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

  • Alternative Portrait von SilencedNoise

    SilencedNoise

    22.02.2012 - 17:52

    Überhaupt nicht zu empfehlen. Das Tutorial verweist auf jQuery Plugin, dessen "Read Me" die Handhabung und Installation besser erklärt als das Tutorial. Schade!

  • Portrait von Sturmrider

    Sturmrider

    04.09.2011 - 21:40

    NICHT zu empfehlen! Die eigentliche Fragestellung "Automatisch skalierende Hintergrundbilder" wird überhaupt nicht thematisiert. Es wird nur Werbung für ein Plugin gemacht, welches über besagte Funktionsweise verfügt.
    Und ganz nebenbei gesagt, die Lösungsweise bei diesem Plugin ist mehr als einfach, wie langweilig. Es wird einfach nur mit z-index gearbeitet. Wer gedacht hat, dass von einem wirklichen Hintergrundbild nach CSS-Definition (background-image: url('test.jpg'); ) die Rede ist, wird enttäuscht.
    Übrigens funktioniert dieses Plugin nicht, wenn auf einer Seite bereits mit z-index gearbeitet wird. Hier treten schwere Komplikationen auf.
    Schade... Punkte verschenkt...

  • Portrait von richterskala

    richterskala

    05.10.2010 - 12:53

    toller effekt, insbesondere das feeling auf gotochina macht das betrachten viel intensiver als bei bildern in fenstern.
    danke :D

  • Alternative Portrait von zero111181

    zero111181

    05.10.2010 - 09:12

    Also die Funktionsweise ist echt klasse nur weiss ich als dau nicht so richtig wo ich den ganzen Code eintragen soll. Was kommt z.B. im Head bereich und was Kommt im Body bereich rein. Gibt es da z.B. ein fertiges script um mir das ganze mal genau anzugucken wo was drin steht.

  • Alternative Portrait von Niobe

    Niobe

    03.10.2010 - 18:21

    Klasse, gefällt mir ausgezeichnet.. leider kämpfe ich noch mit einem anderen jQuery beim einbinden auf die HP. Kommt also im Moment in die Rubrik Jäger und Sammler.

  • Alternative Portrait von themo_23

    themo_23

    01.10.2010 - 14:00

    Wow, echt hilfreich und sieht spitze aus.

    Vielen dank, das muss ich auch einbauen auf meiner Seite ;=

  • Alternative Portrait von Wohes

    Wohes

    01.10.2010 - 09:32

    Klasse! Sehr gute Wirkung. Das können wir gut gebrauchen.

  • Alternative Portrait von wuesti

    wuesti

    30.09.2010 - 19:37

    Klasse! Das kann unsere gesamte familiy (alles Webdesign-Fans, aber noch Anfänger) sehr gut gebrauchen. Vielen Dank!

  • Alternative Portrait von flyjoker

    flyjoker

    29.09.2010 - 21:23

    Weltklasse! Danach habe ich gesucht.

  • Alternative Portrait von MIB101

    MIB101

    28.09.2010 - 20:37

    Ich werd mich wohl mehr mit jQuery befassen müssen =) Ist ja klasse! Sehr gut beschrieben, mal sehen ob ich das anwenden werden kann.

  • Alternative Portrait von testuserxc

    testuserxc

    28.09.2010 - 12:10

    Wahnsinn. Sowas habe ich schon immer gesucht.
    Aber wie das nun mal so ist: Wenn man nicht mehr sucht, wird man fündig.
    Danke!

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

Tutorial empfehlen

 

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


Ruft man die Seite http://ringvemedia.com/ auf, wirkt das auf den ersten Blick nicht sonderlich spektakulär.

Bilder


 
Über den gesamten Seitenhintergrund wird eine Grafik angezeigt. Allerdings ist die Seite so programmiert, dass sich die Hintergrundbilder immer dem Browserfenster anpassen. Ein Blick in den Quelltext der Seite verrät, wie die Entwickler diesen Effekt umgesetzt haben: Die Basis bilden die MooTools. Wer die MooTools und die entsprechenden Erweiterungen – aus welchen Gründen auch immer – nicht einsetzen möchte, kann eine solche Anwendung auch auf Basis von jQuery definieren.

Dazu muss man lediglich das richtige Plug-in einbinden. Das Plug-in Supersized – Full Screen Background/Slideshow können Sie von der Seite http://www.buildinternet.com/project/supersized/ herunterladen. Bevor Sie das tun, können Sie sich zunächst anhand des zur Verfügung gestellten Live-Demos ansehen, wie das Plug-in arbeitet.

Bilder


 
Dort kann man sich anhand wechselnder Hintergrundbilder die Funktionsweise des Plug-ins ansehen. Die folgenden Funktionen hat Supersized – Full Screen Background/Slideshow zu bieten:
  • Die Seitenverhältnisse der Hintergrundbilder werden beibehalten.
  • Durch die Hintergrundbilder werden keine unnötigen Bildlaufleisten angezeigt.
  • Die Hintergründe lassen sich via Slideshow wechseln.
  • Für die Navigation werden Schaltflächen angeboten, durch die sich die Slideshow steuern lässt.

Das Plug-in unterstützt derzeit die folgenden Browser:
  • Firefox
  • Google Chrome
  • Safari
  • Opera
  • Internet Explorer (ab Version 6)

Um das Plug-in nutzen zu können, muss zunächst jQuery eingebunden werden. Erst danach lädt man die eigentliche Plug-in-Datei. Die beiden Aufrufe könnten folgendermaßen aussehen:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>
Wobei hier davon ausgegangen wird, dass sich die beiden Dateien jquery.js und supersized.2.0.js im gleichen Verzeichnis wie die HTML-Datei befinden, in der das Plug-in verwendet wird.
Definieren Sie anschließend innerhalb des body-Elements den Hauptbereich, also den, in dem die Hintergrundbilder bzw. das Hintergrundbild angezeigt werden sollen. Soll immer dasselbe Hintergrundbild angezeigt werden, sieht das so aus:
<div id="supersize">
 <a href="#">
 <img src="images/paradise.jpg" title="Paradies"/>
 </a> 
</div>

In den Beispielen dieses Tutorials wird auf die Bilder zurückgegriffen, die im images-Verzeichnis des Plug-ins mitgeliefert werden.

Es ist in diesem Beitrag bereits angeklungen, dass man auch mehrere Hintergrundbilder definieren lassen. Diese laufen dann in einer Slideshow ab, die durch den Benutzer bei Bedarf sogar gezielt gesteuert werden kann. Angenommen, Sie möchten drei verschiedene Hintergrundbilder einbinden. Die entsprechende Definition sähe folgendermaßen aus:
<div id="supersize"> 
 <a href="#"><img src="images/bird.jpg" title="Vogel"/></a> 
 <a href="#"><img src="images/paradise.jpg" title="Paradies"/></a>
 <a href="#"><img src="images/snake.jpg" title="Schlange"/></a>
</div>

Zunächst aber zurück zum einfachsten Fall, also der Anwendung, bei der lediglich eine Hintergrundgrafik verwendet wird. Im ersten Schritt werden die nötigen CSS-Definitionen angelegt. Diese könnten folgendermaßen aussehen:
<style type="text/css">
 /* <![CDATA[ */
 body { 
 overflow:hidden;
 } 
 #supersize {
 position:fixed;
 }
 #supersize img, #supersize a {
 height:100%;
 width:100%;
 position:absolute;
 z-index: 0;
 }
 /* ]]> */
</style>

Über die overflow-Eigenschaften des body-Elements wird festgelegt, dass keine Bildlaufleisten angezeigt werden. Mit widht und height legt man die Größe des Bereichs fest, in dem die Hintergrundbilder zu sehen sein sollen. Damit sind die Vorarbeiten abgeschlossen.

Weiter geht es mit der jQuery-Definition. Im einfachsten Fall sieht die folgendermaßen aus:

[Beispiel anzeigen]
<script type="text/javascript"> 
 /* <![CDATA[ */
 $(document).ready(function(){
 $('#supersize').supersized(); 
 });
 /* ]]> */
</script>

Hier wird festgelegt, dass keine Slideshow wiedergegeben werden soll. Stattdessen wird lediglich das zuvor definierte Bild angezeigt. Dazu wird der Wert von slideshow auf 0 gesetzt.


 

Slideshow einfügen

Es ist bereits angeklungen, dass das Plug-in noch weitaus mehr kann, als bloß eine skalierende Hintergrundgrafik anzuzeigen. Vielmehr lässt sich durch ein wenig Mehraufwand ein Slideshow-Hintergund umsetzen, der sogar vom Benutzer gesteuert werden kann. Angenommen, Sie rufen eine entsprechende Webseite auf. Dort wird zunächst ein Hintergrundbild angezeigt.

[Beispiel anzeigen]

Bilder


 
Nach Ablauf einer bestimmten Frist wechselt dieses Hintergrundbild nun. Alternativ dazu können Sie die Bilder auch selbst über die angebotenen Schaltflächen wechseln.

Bilder


 
Um eine solche Anwendung umzusetzen, definieren Sie innerhalb eines div-Bereichs all die Bilder, die von der Slideshow erfasst werden sollen.
<div id="supersize"> 
 <a href="#"><img src="images/bird.jpg" title="Paradies"/></a> 
 <a href="#"><img src="images/paradise.jpg" title="Paradies"/></a>
 <a href="#"><img src="images/snake.jpg" title="Paradies"/></a>
</div>

Den CSS-Bereich muss man ebenfalls anpassen.
<style type="text/css">
 /* <![CDATA[ */
 body {
 overflow:hidden;
 }
 #supersize {
 position:fixed;
 }
 #supersize img, #supersize a {
 height:100%;
 width:100%;
 position:absolute;
 z-index: 0;
 }
 #supersize .prevslide, #supersize .prevslide img {
 z-index: 1;
 }
 #supersize .activeslide, #supersize .activeslide img {
 z-index: 2;
 }
 /* ]]> */
</style>

Zusätzlich wird der Skript-Bereich um eine Option erweitert.

[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function(){
 $.fn.supersized.options = { 
 slideshow: 1,
 };
 $('#supersize').supersized(); 
 });
 /* ]]> */
</script>

Durch slideshow: 1 wird die Slideshow aktiviert.

 
Für die Navigation können Sie Grafiken verwenden. Diese können Sie selbst erstellen. Alternativ dazu bringt das Plug-in aber auch bereits vorgefertigte Grafiken mit. Zu finden sind diese im images-Verzeichnis des entpackten Archivs.

Bilder


 
Damit die Navigation genutzt werden kann, müssen zusätzliche Optionen angegeben werden.

[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
 $(document).ready(function(){
 $.fn.supersized.options = { 
 vertical_center: 1,
 slideshow: 1,
 navigation: 1,
 transition: 1, 
 };
 $('#supersize').supersized(); 
 });
 /* ]]> */
</script>

Entscheidend ist hier das Setzen der Option navigation auf den Wert 1. Zusätzlich muss der CSS-Bereich erweitert werden.
<style type="text/css">
 /* <![CDATA[ */
 body {
 overflow:hidden;
 }
 #content {
 margin:0px auto;
 height:100px;
 width:100%;
 z-index: 3;
 background:#262626 no-repeat 90%;
 position:absolute;
 }
 #navigation {
 background: url('images/navbg.gif') no-repeat;
 float: right;
 }
 #supersize {
 position:fixed;
 }
 #supersize img, #supersize a {
 height:100%;
 width:100%;
 position:absolute;
 z-index: 0;
 }
 #supersize .prevslide, #supersize .prevslide img {
 z-index: 1;
 }
 #supersize .activeslide, #supersize .activeslide img {
 z-index: 2;
 }
 /* ]]> */
 </style>

Was jetzt noch fehlt, ist die eigentliche Navigation. Hierfür werden zusätzliche div-Elemente eingefügt, über die sich die Slideshow steuern lässt.
<div id="supersize">
 <a href="#"><img src="images/bird.jpg" title="Paradies"/></a>
 <a href="#"><img src="images/paradise.jpg" title="Paradies"/></a> 
 <a href="#"><img src="images/snake.jpg" title="Paradies"/></a> 
</div>
<div id="content">
<div id="navigation"> 
 <a href="#" id="prevslide"><img src="images/back_dull.gif"/></a>
 <a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a>
 <a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a> 
</div>
</div>

Das Plug-in kommt mit einigen zusätzlichen Optionen daher, durch die sich die Ausgabe etwas detaillierter steuern lässt. Welche Optionen angeboten werden, wird auf der Seite http://buildinternet.com/project/supersized/ beschrieben. Dort wird außerdem anhand von Beispielen gezeigt, wie Sie die Slideshow optisch ansprechender gestalten können. So lässt sich beispielsweise mit wenig Aufwand ein Bilderzähler einbauen.

vBulletin 0.042 • ZF-App 0.503 • Total 0.545