Kategorien
JavaScript & jQuery Programmierung

Imagefill.js: Tool für responsives Design passt Bilder an den umgebenden Container an

John Polacek aus Chicago ist der Designer-Community kein Unbekannter. Er ist verantwortlich für bekannte Tools wie Bigvideo.js, Scrollorama, Responsivator und vielen mehr. Vor einer guten Woche fügte er seinem ohnehin schon beachtlichen Portfolio ein weiteres Werkzeug hinzu. Mit Imagefill.js sorgt man dafür, dass Bilder stets den sie umgebenden Container füllen und sich dabei zentrieren. Das Seitenverhältnis bleibt dabei gewahrt.

imagefill-startpage

Imagefill.js: Kein Schnick-Schnack

Imagefill.js ist ein kleines Tool mit übersichtlichem Anspruch. Es sorgt per Funktionsaufruf auf die ID eines Containers dafür, dass das in diesem Container enthaltene Bild zentriert und auf die Größe des Containers angepasst wird. Es findet keine Veränderung der Seitenverhältnisse statt. Stattdessen wird dann lediglich ein zentrierter Bildausschnitt gezeigt. Indem man verschachtelte Container anlegt, ist auch eine Optik á la Pinterest oder ein bildschirmfüllendes Grid aus Divs realisierbar.

imagefill-exp
Anpassung an den Container ohne Änderung des Seitenverhältnisses

Imagefill.js setzt jQuery und das separat erhältliche Plugin ImagesLoaded voraus. ImagesLoaded stellt lediglich fest, wann alle Bilder eines definierten Bereichs geladen sind, so dass Imagefill.js überhaupt erst sinnvoll aktiv werden kann. Um das Plugin einzusetzen, binden Sie entsprechend jQuery, dann ImagesLoaded und dann Imagefill.js im Head Ihrer Seite ein.

Ein entsprechendes Div kann dann so aussehen:

Der Funktionsaufruf stellt sich wie folgt dar:

$('.container').imageFill(); 
// image stretches to fill container

Wie bereits erwähnt, sind beliebige Verschachtelungen möglich, Polacek liefert hier ein Beispiel eines bildschirmfüllenden, vollständig responsiven Grid:

imagefill-responsive
Bildschirmfüllend, responsiv

Mit zusätzlichen Tools, etwa Packery, kann eine Pinterest-ähnliche Präsentation realisiert werden.

Polacek stellt Imagefill.js unter GPL- und MIT-Doppellizenz für den privaten, wie kommerziellen Gebrauch kostenlos ab. Das Tool kann bei Github heruntergeladen werden.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Tabulous.js: Beliebige Inhalte in Tabs organisieren per jQuery

Aaron Lumsden aus der englischen Grafschaft West-Yorkshire liebt jQuery. Erst vor vier Wochen stellten wir hier bei Dr. Web sein Plugin Progression.js vor, das das Ausfüllen unvermeidlicher Formulare erleichtert. Heute fiel mir ein weiteres nützliches Plugin aus seiner Feder in den Schoß. Mit Tabulous.js kann beliebiger Content auf einfache Weise in Tab-Containern untergebracht und mit zeitgemäßen Effekten zur Anzeige gebracht werden.

tabulous-js-start

Tabulous.js: Vielfältige Effekte, einfache Verwendung

Ob man die Herangehensweise Lumsdens mag oder nicht ist sicherlich Geschmackssache. Manch einer verwendet lieber ausgewachsene Frameworks, die mehr Features bieten, als man in einem normalen Projekt benötigt, dafür aber eine homogene Umsetzung gewährleisten. Andere, wie Lumsden (und ich), setzen auf kleine spezialisierte Tools, die man im Zweifel kumuliert einsetzt, bis das Funktionalitäts-Level erreicht ist, das dem Projektziel entspricht.

tabulous-action

Tabulous.js erfüllt genau einen einzigen Zweck. Es erlaubt, beliebige Inhalte in div zu organisieren und mit Karteireiter-Navigation versehen zu präsentieren. Verschiedene Effekte sorgen für eine moderne Anmutung. So lassen sich Inhalte etwa von der Seite her einschieben oder per Flip-Effekt wechseln.

Die Einbindung ist jQuery-typisch simpel. Da es lediglich eine einzelne Variable, nämlich den effect gibt, gerät der Funktionsaufruf nicht zur Scripting-Orgie. Nachdem jQuery und das Plugin nebst zugehörigem CSS eingebettet sind, gilt es ein mehrfach verschachteltes div zu erstellen, dessen oberste Ebene die ID tabserhält.

So kann das aussehen:


Danach gilt es dann lediglich noch, den Funktionsaufruf zu starten:

$('#tabs').tabulous({
    	effect: 'scale'
    });	

In diesem Beispiel habe ich die Variable effect verwendet, die dafür sorgt, dass der Content in unterschiedlicher Weise ein- und ausanimiert wird. Die Variable ist optional. Mehr gibt es nicht zu sagen.

Tabulous.js ist ein einfaches, kleines Tool, das in nahezu idealer Weise den selbstgesetzten Zweck erfüllt und bei mir bereits spontan in einem Projekt Verwendung gefunden hat. Tabulous.js steht kostenfrei auf Github zum Download bereit und kann privat, wie kommerziell unter MIT-Lizenz eingesetzt werden.

Links zum Beitrag