Webdesign

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

27. Februar 2009

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Tobi
Gast
7 Jahre 2 Monate her

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

Helen
Gast
Helen
7 Jahre 2 Monate her
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… Read more »
Wolfgang
Gast
7 Jahre 2 Monate her

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

pockmann
Gast
7 Jahre 2 Monate her

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

arnie
Gast
arnie
5 Jahre 7 Monate her

Wo zeigt er das denn?

timmse
Gast
timmse
7 Jahre 2 Monate her

Nettes script – wird auf jeden Fall mal angetestet!

David Hellmann
Gast
7 Jahre 2 Monate her

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

Helen
Gast
Helen
7 Jahre 2 Monate her

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.

trackback

[…] Ü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. […]

trackback
7 Jahre 1 Monat her

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

Volkan
Gast
6 Jahre 11 Monate her

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

trackback

[…] 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 […]

Karl Salbrechter
Gast
6 Jahre 6 Monate her
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… Read more »
hb
Gast
6 Jahre 18 Tage her

ich benutze lieber das plugin von Scott Robbin

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

torsten
Gast
5 Jahre 10 Monate her

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

Thomas
Gast
Thomas
4 Jahre 27 Tage her

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

trackback

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

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen