Florian Fiegel 27. Februar 2009

jQuery-Plugin „Supersized“: Autoskalierender Background mit Slideshow-Option

Die Website GOTOCHINA hat mit ihren an das Browserfenster angepassten Hintergrundbildern für Aufsehen gesorgt. Die Umsetzung mit MooTools und Erweiterungen gilt allerdings als nicht vollständig browserkompatibel. Sam Dunn hat nun auf Build Internet! ein Plugin für jQuery veröffentlicht, das diesen Eyecatcher via jQuery bereitstellt. Das Plugin „Supersized“ bietet zusätzlich noch die Möglichkeit, die Hintergrundbilder als Slideshow einzurichten.

Wie für jQuery üblich, ist das Plugin ein Leichtgewicht in Sachen Code. Neben der üblichen Einbindung von jQuery und des Plugins selbst, werden einige wenige Zeilen CSS und HTML benötigt, zusätzlich fällt dann nur noch die Funktion mit den gewünschten Optionen an. Eine Live-Demo von Supersized kann man sich ebenfalls anschauen.

Das Plugin ist zu allen wichtigen Browsern kompatibel und ist auch für unbedarftere jQuery-Anfänger schnell einsatzbereit.

Der CSS-Part


/*Supersize Plugin Styles*/
body { overflow:hidden; } //Verhindert das Erscheinen von Scrollbars beim

#supersize img, #supersize a{
height:100%;
width:100%;
display:none;
}

#supersize .activeslide, #supersize .activeslide img { display:inline; } //Die Klasse .activeslide übergibt an das Plugin, welches Element gerade angezeigt werden soll. Weitere Elemente, die mit einem Slide versteckt oder gezeigt werden sollen, müssen hier zusätzlich definiert werden.

Der HTML-Part


<div id="supersize">
<img class="activeslide" src="picture.jpg"/>
<a href="#"><img src="picture2.jpg"/></a>
</div>

Dieser Html-Schnipsel ist für die Verwendung der Slideshow-Option gedacht, soll nur ein Hintergrundbild verwendet werden, kann der Link einfach weggelassen werden.

Plugin einbinden

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="supersized.1.0.js"></script>

Die benötigte Funktion mit den Konfigurationsoptionen muss unterhalb der Plugin-Einbindung ihren Platz finden:

$(function(){
$.fn.supersized.options = {
startwidth: 1024, // startwidth und startheight geben die Ausgangsgrößen des Bildes für die korrekte Skalierung an.
startheight: 768,
minsize: .5, // Relative Mindestgröße des Bildes, hier mit 50% von der Originalgröße
slideshow: 1, // Die "1" steht für Slideshow, alle anderen Werte schalten diese ab.
slideinterval: 5000 // Intervall der Slideshow in Millisekunden.
};
$('#supersize').supersized();
});

Zukünftige Pläne des Entwicklers

Für weitere Versionen ist der Ausbau der Slideshow mit Effekten sowie Vor- und Zurück-Buttons angedacht. Weiterhin soll die manuelle Angabe der Bildgrößen einer automatischen Erfassung weichen und das „overflow:hidden;“ einer eleganteren Lösung weichen. ™

Florian Fiegel

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

17 Kommentare

  1. Die Idee gefällt mir soweit gut ..

    Aber:

    Ich möchte natürlich die Bilder nicht verzerren!

    Das Autoskalieren auf dem Hintergrund ist das Interessant – aber die Ratio der Bilder sollte nie verändert werden.

    Ist das irgendwie möglich?

    Danke :)

  2. Genau das, was ich gerade selber machen wollte. Danke für die Arbeitsersparnis :-)

  3. Die Diskussionen um GOTOCHINA haben bei mir mit einiger „Retarderwirkung“ folgende konträre Überlegungen ausgelöst:

    1.) GOTOCHINA lebt nicht primär von der flexiblen Gestaltung, sondern von der ungewöhnlichen Anzahl sich dafür ausgezeichnet eignender Fotos. Fotos, die auch in verzerrtem Zustand gut aussehen und zudem durch ihre geringe Datenmenge begeistern, bekomme ich in der Praxis selten in größeren Stückzahlen zur Verfügung gestellt. Auch nicht um viel Geld.

    2.) Das eigentliche Problem ist nicht die Nachahmung von GOTOCHINA, sondern die ansprechende Befüllung unterschiedlicher Formate. Ist flexible Verzerrung denn wirklich der einzige Weg?

    Meine persönliche Konsequenz daraus war:

    Warum eine einzigartige Idee nachäffen? Haben wir alle denn keinen Funken Kreativität mehr im Leib? WEG vom autoskalierenden, zufälligen, verzerrenden GOTOCHINA-Design. Stattdessen bewusste Gestaltung des Hintergrundes mit kontrollierter Unschärfe. Damit lassen sich „riesige“ Hintergründe „serienmäßig“ unter ca. 30KB drücken. Die jQuery-Flexi-Frage ist damit obsolet. Das Problem der unterschiedlichen Bildschirmgrößen spielt sich fast nur noch in Photoshops Gaußschem Weichzeichner ab. Die Verfügbarkeit geeigneter Fotos ist kein K.O.-Kriterium mehr. Stimmt man den unteren Rand des Hintergrundbildes mit der Hintergrundfarbe ab, so ist auch das „fixed“-Problem des IE6 kein Hemmnis, auf welches man Zeit für einen Hack verschwenden müsste.

    Beispiel: http://www.digitales-design.at. Die Krokodile ganz unten beißen übrigens nicht, sie blinzeln nur manchmal.

  4. Hallo,

    ich weiß eigentlich nicht in welchem Browser die Lösung von GOTOCHINA nicht funktioniert (IE6 hats mitgemacht), außerdem hat die Lösung den Vorteil, dass er auch wirklich für den Einsatz auf websites geeignet ist. Das jquery plug-in bietet nämlich keine Möglichkeit zum scrollen.
    Ich hab trotz langem ausprobieren nicht verstanden wie es die Macher von GOTOCHINA das ganze hinbekommen haben und bin auf CSS umgestiegen. Um dann doch image transitions und wechselnde hintergründe zu haben das ganze mit Mootools kombiniert.

    Live is das ganze hier zu sehen: http://k3.rhizom.nl (noch nicht ganz fertig)
    Das „plug-in“ für die transitions gibts hier:
    http://web.rhizom.nl/development/mootools/mootools-supersize-background/

    gruss Volkan

  5. Ich habs inzwischen ausprobiert. Das Script kann deutlich mehr, als man mit CSS erreichen kann. Oder anders ausgedrückt: CSS bietet nichts, was man tatsächlich verwenden kann. Das Script skaliert die Bilder auch hoch, und zwar erstaunlich gut, wenn man ein gut gespeichertes JPG hat. Der rechte Bildrand schließt verläßlich am rechten Rand des Fensters ab, allerdings fällt dann der untere Bildteil in den hidden overflow-y. Das meinte ich in meinem ersten Post. Es wäre gut, wenn das Script die Fensterdimension ausläse und das passende Bild aus einer Auswahl verwendete. Sonst toll.

  6. mit css ist das soweit nicht möglich denke ich. außer man arbeitet mit z-index aber normal kannst du einem background in css ja keine prozentuale größe mitgeben sondern nur kacheln. oder hab ich was vergessen? :D

  7. Nettes script – wird auf jeden Fall mal angetestet!

  8. doch CSS kann das auch, ganz entspannt anscheinend sogar.
    Stu Nichols zeigt es auf seiner Webseite.

  9. Wäre das nicht auch alleine mit CSS möglich? Wozu gibt es denn die %-Angaben?

  10. Das Beispiel ist wirklich beeindruckend. Darauf habe ich lange gewartet. Allerdings habe ich erwartet, daß ein solches Plugin die Größe des Browserfensters mißt und je nach Größe eine passende Bildversion lädt und verwendet. Das Messen der Fenstergröße muß möglich sein, schließlich muß der Browser die Seite ja mit dieser Information rendern.

    Wenn es für ein 1024px breites Fenster (also 960px netto) ein 1600px breites Bild lädt und verkleinert, fällt unnötiger Datenverkehrt an. Und was passiert, wenn jemand mit 26-Zoll-Bildschirm ein Standardbild von 1024px Breite hochskaliert bekommt? Sieht er den Hintergrund dann pixelig?

    Noch wichtiger: Es gibt Monitorseitenverhältnisse von 16:10 und 4:3. Ein Hintergrundbild ist ja genau durchkomponiert. Was wenn auf dem Bild nur eine einzige Glühbirne wäre, die genau in der Mitten und im Goldenen Schnitt liegen soll?

    Fragen über Fragen. Trotzdem tolles Plugin. Ich werde es gleich ausprobieren. Dnake für den Beitrag!

  11. Funktioniert soweit ganz gut in FF und Opera (unter Linux), nur beim Unterschreiten der Originalgröße wird das Bild nicht verkleinert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.