Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Florian Fiegel 27. Februar 2009

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

Die Website GOTOCHINA hat mit ihren an das Browserfenster ange­pass­ten Hintergrundbildern für Aufsehen gesorgt. Die Umsetzung mit MooTools und Erweiterungen gilt aller­dings als nicht voll­stän­dig brow­ser­kom­pa­ti­bel. Sam Dunn hat nun auf Build Internet! ein Plugin für jQuery ver­öf­fent­licht, das die­sen Eyecatcher via jQuery bereit­stellt. Das Plugin “Supersized” bie­tet zusätz­lich noch die Möglichkeit, die Hintergrundbilder als Slideshow ein­zu­rich­ten.

Wie für jQuery üblich, ist das Plugin ein Leichtgewicht in Sachen Code. Neben der übli­chen Einbindung von jQuery und des Plugins selbst, wer­den eini­ge weni­ge Zeilen CSS und HTML benö­tigt, zusätz­lich fällt dann nur noch die Funktion mit den gewünsch­ten Optionen an. Eine Live-Demo von Supersized kann man sich eben­falls anschau­en.

Das Plugin ist zu allen wich­ti­gen Browsern kom­pa­ti­bel und ist auch für unbe­darf­te­re jQuery-Anfänger schnell ein­satz­be­reit.

Der CSS-Part


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

#super­si­ze img, #super­si­ze a{
height:100%;
width:100%;
display:none;
}

#super­si­ze .active­s­li­de, #super­si­ze .active­s­li­de img { display:inline; } //Die Klasse .active­s­li­de über­gibt an das Plugin, wel­ches Element gera­de ange­zeigt wer­den soll. Weitere Elemente, die mit einem Slide ver­steckt oder gezeigt wer­den sol­len, müs­sen hier zusätz­lich defi­niert wer­den.

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 ver­wen­det wer­den, kann der Link ein­fach weg­ge­las­sen wer­den.

Plugin einbinden

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

Die benö­tig­te Funktion mit den Konfigurationsoptionen muss unter­halb der Plugin-Einbindung ihren Platz fin­den:

$(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 wei­te­re Versionen ist der Ausbau der Slideshow mit Effekten sowie Vor- und Zurück-Buttons ange­dacht. Weiterhin soll die manu­el­le Angabe der Bildgrößen einer auto­ma­ti­schen Erfassung wei­chen und das “overflow:hidden;” einer ele­gan­te­ren Lösung wei­chen. (tm)

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.

13 Kommentare

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

    Aber:

    Ich möch­te natür­lich die Bilder nicht ver­zer­ren!

    Das Autoskalieren auf dem Hintergrund ist das Interessant – aber die Ratio der Bilder soll­te nie ver­än­dert wer­den.

    Ist das irgend­wie mög­lich?

    Danke :)

  2. Genau das, was ich gera­de sel­ber machen woll­te. Danke für die Arbeitsersparnis :-)

  3. Die Diskussionen um GOTOCHINA haben bei mir mit eini­ger “Retarderwirkung” fol­gen­de kon­trä­re Überlegungen aus­ge­löst:

    1.) GOTOCHINA lebt nicht pri­mär von der fle­xi­blen Gestaltung, son­dern von der unge­wöhn­li­chen Anzahl sich dafür aus­ge­zeich­net eig­nen­der Fotos. Fotos, die auch in ver­zerr­tem Zustand gut aus­se­hen und zudem durch ihre gerin­ge Datenmenge begeis­tern, bekom­me ich in der Praxis sel­ten in grö­ße­ren Stückzahlen zur Verfügung gestellt. Auch nicht um viel Geld.

    2.) Das eigent­li­che Problem ist nicht die Nachahmung von GOTOCHINA, son­dern die anspre­chen­de Befüllung unter­schied­li­cher Formate. Ist fle­xi­ble Verzerrung denn wirk­lich der ein­zi­ge Weg?

    Meine per­sön­li­che Konsequenz dar­aus war:

    Warum eine ein­zig­ar­ti­ge Idee nach­äf­fen? Haben wir alle denn kei­nen Funken Kreativität mehr im Leib? WEG vom autoska­lie­ren­den, zufäl­li­gen, ver­zer­ren­den GOTOCHINA-Design. Stattdessen bewuss­te Gestaltung des Hintergrundes mit kon­trol­lier­ter Unschärfe. Damit las­sen sich “rie­si­ge” Hintergründe “seri­en­mä­ßig” unter ca. 30KB drü­cken. Die jQuery-Flexi-Frage ist damit obso­let. Das Problem der unter­schied­li­chen Bildschirmgrößen spielt sich fast nur noch in Photoshops Gaußschem Weichzeichner ab. Die Verfügbarkeit geeig­ne­ter Fotos ist kein K.O.-Kriterium mehr. Stimmt man den unte­ren Rand des Hintergrundbildes mit der Hintergrundfarbe ab, so ist auch das “fixed”-Problem des IE6 kein Hemmnis, auf wel­ches man Zeit für einen Hack ver­schwen­den müss­te.

    Beispiel: http://www.digitales-design.at. Die Krokodile ganz unten bei­ßen übri­gens nicht, sie blin­zeln nur manch­mal.

  4. Hallo,

    ich weiß eigent­lich nicht in wel­chem Browser die Lösung von GOTOCHINA nicht funk­tio­niert (IE6 hats mit­ge­macht), außer­dem hat die Lösung den Vorteil, dass er auch wirk­lich für den Einsatz auf web­sites geeig­net ist. Das jque­ry plug-in bie­tet näm­lich kei­ne Möglichkeit zum scrol­len.
    Ich hab trotz lan­gem aus­pro­bie­ren nicht ver­stan­den wie es die Macher von GOTOCHINA das gan­ze hin­be­kom­men haben und bin auf CSS umge­stie­gen. Um dann doch image tran­si­ti­ons und wech­seln­de hin­ter­grün­de zu haben das gan­ze mit Mootools kom­bi­niert.

    Live is das gan­ze hier zu sehen: http://k3.rhizom.nl (noch nicht ganz fer­tig)
    Das “plug-in” für die tran­si­ti­ons gibts hier:
    http://web.rhizom.nl/development/mootools/mootools-supersize-background/

    gruss Volkan

  5. Ich habs inzwi­schen aus­pro­biert. Das Script kann deut­lich mehr, als man mit CSS errei­chen kann. Oder anders aus­ge­drückt: CSS bie­tet nichts, was man tat­säch­lich ver­wen­den kann. Das Script ska­liert die Bilder auch hoch, und zwar erstaun­lich gut, wenn man ein gut gespei­cher­tes JPG hat. Der rech­te Bildrand schließt ver­läß­lich am rech­ten Rand des Fensters ab, aller­dings fällt dann der unte­re Bildteil in den hid­den over­flow-y. Das mein­te ich in mei­nem ers­ten Post. Es wäre gut, wenn das Script die Fensterdimension aus­lä­se und das pas­sen­de Bild aus einer Auswahl ver­wen­de­te. Sonst toll.

  6. mit css ist das soweit nicht mög­lich den­ke ich. außer man arbei­tet mit z-index aber nor­mal kannst du einem back­ground in css ja kei­ne pro­zen­tua­le grö­ße mit­ge­ben son­dern nur kacheln. oder hab ich was ver­ges­sen? :D

  7. Nettes script – wird auf jeden Fall mal ange­tes­tet!

  8. doch CSS kann das auch, ganz ent­spannt anschei­nend sogar.
    Stu Nichols zeigt es auf sei­ner Webseite.

  9. Wäre das nicht auch allei­ne mit CSS mög­lich? Wozu gibt es denn die %-Angaben?

  10. Das Beispiel ist wirk­lich beein­dru­ckend. Darauf habe ich lan­ge gewar­tet. Allerdings habe ich erwar­tet, daß ein sol­ches Plugin die Größe des Browserfensters mißt und je nach Größe eine pas­sen­de Bildversion lädt und ver­wen­det. Das Messen der Fenstergröße muß mög­lich sein, schließ­lich muß der Browser die Seite ja mit die­ser Information ren­dern.

    Wenn es für ein 1024px brei­tes Fenster (also 960px net­to) ein 1600px brei­tes Bild lädt und ver­klei­nert, fällt unnö­ti­ger Datenverkehrt an. Und was pas­siert, wenn jemand mit 26-Zoll-Bildschirm ein Standardbild von 1024px Breite hoch­ska­liert bekommt? Sieht er den Hintergrund dann pixe­lig?

    Noch wich­ti­ger: Es gibt Monitorseitenverhältnisse von 16:10 und 4:3. Ein Hintergrundbild ist ja genau durch­kom­po­niert. Was wenn auf dem Bild nur eine ein­zi­ge Glühbirne wäre, die genau in der Mitten und im Goldenen Schnitt lie­gen soll?

    Fragen über Fragen. Trotzdem tol­les Plugin. Ich wer­de es gleich aus­pro­bie­ren. 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 ver­klei­nert.

Schreibe einen Kommentar

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