Anzeige
Tutorialbeschreibung

jQuery - Automatisch skalierende Hintergrundbilder

jQuery - Automatisch skalierende Hintergrundbilder

Hintergrundgrafiken haben normalerweise eine feste Größe. Dass das nicht unbedingt so sein muss, hat bereits vor einiger Zeit die Webseite GOTOCHINA bewiesen, die unter http://ringvemedia.com/ zu finden ist. Das Besondere an dieser Seite: Das Hintergrundbild passt sich automatisch der Fenstergröße des Browsers an. Mit dem passenden Zubehör lassen sich solche Anwendungen auch in jQuery umsetzen.


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.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von 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
  • 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
  • 05.10.2010 - 12:53

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

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

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

Portrait von themo_23
  • 01.10.2010 - 14:00

Wow, echt hilfreich und sieht spitze aus.

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

Portrait von Wohes
  • 01.10.2010 - 09:32

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

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.09.2010 - 19:37

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

Portrait von flyjoker
  • 29.09.2010 - 21:23

Weltklasse! Danach habe ich gesucht.

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

Portrait von 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!

x
×
×