Webdesign

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

27. Februar 2009
von

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

Seit 2008 freier Webworker mit Schwerpunkt auf journalistischer Berichterstattung und (Online-)PR. Täglich konfrontiert mit unzähligen Tools und Technologien im Web.

17 Kommentare zu „jQuery-Plugin “Supersized”: Autoskalierender Background mit Slideshow-Option
  1. Tobi am 27. Februar 2009 um 10:21

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

  2. Helen am 27. Februar 2009 um 10:45

    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!

  3. Wolfgang am 27. Februar 2009 um 11:03

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

  4. pockmann am 27. Februar 2009 um 20:17

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

    • arnie am 10. September 2010 um 11:54

      Wo zeigt er das denn?

  5. timmse am 28. Februar 2009 um 10:57

    Nettes script – wird auf jeden Fall mal angetestet!

  6. David Hellmann am 28. Februar 2009 um 18:32

    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. Helen am 28. Februar 2009 um 20:20

    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.

  8. […] Über Dr. Web bin ich nun auf ein jQuery-Plugin gestoßen mit dem es eben h möglich ist Fotos zu nutzen, da Supersized, so der Name des Plugin, es schafft das Seitenverhältnis der Bilder zu behalten. […]

  9. Gutes im Netz at webCONSUL am 6. März 2009 um 16:00

    […] elegant gelöst, aber für den Einstieg passabel. Schöner finde ich da ebenfalls bei Dr. Web den Artikel über Supersized. Schaut mal […]

  10. Volkan am 14. Mai 2009 um 21:13

    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

  11. […] verhindert weitere bearbeitung von JS-Code Hy. Weil das JQuery-Plugin supersizedjQuery-Plugin "Supersized": Autoskalierender Background mit Slideshow-Option und lightbox nicht miteinander kompatibel sind, habe ich per CSS und dem :focus selbst eins […]

  12. Karl Salbrechter am 28. Oktober 2009 um 00:27

    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.

  13. hb am 11. April 2010 um 00:11

    ich benutze lieber das plugin von Scott Robbin

    http://srobbin.com/jquery-plugins/jquery-backstretch/

  14. torsten am 6. Juni 2010 um 01:11

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

  15. Thomas am 1. April 2012 um 18:33

    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 :)

  16. […] Aussehen: Probiert es ruhig aus! Einbinden:Link zur Anleitung […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!