jQuery – Accessible-RIA – Widgets für jedermann

Oliver Storm — Fri, 16 Oct 2009 08:08:05 +0000

Heute morgen bin ich auf was nettes gestoßen das ich hier kurz erwähnen möchte.
jQuery – Accessible-RIA ist eine Sammlung von mehreren einfach zu implementierenden Widgets, welche alle 100% WAI WCAG 2.0 und WAI AIRA konform sind.
Besonders für Frontend Entwickler ist das ganze interessant. Macht es eine Seite doch für jedermann vollständig zugänglich.

Das ganze basiert auf jQuery UI und beinhaltete folgende Widgets:

Alle Infos zum Projekt, sowie Demos, Doku usw findet man im Wiki von github.

Lightboxen im Überblick – oder Popup´s im Web 2.0

Oliver Storm — Sat, 07 Mar 2009 02:06:32 +0000

Anfangs noch Trend und neu, heute weitverbreitet und fast jeder User hat sie schon mal gesehen, Lightboxen. Die netten kleinen Javascript gesteuerten Widgets zum betrachten von Bildern, Filmen, Flash-Dateien oder ganzen Seiten.

In diesem Post will ich versuchen euch einen möglichst großen Überblick über die Lightbox, welche auf den gängigen Javascript-Frameworks aufbauen, und ihrer Ableger zu verschaffen.
Momentan sind mal die ersten 15 Lightboxen eingetragen. Der Post wird jedoch in den nächsten Tagen und Wochen ständig wachsen. so, keep watching.

Lightbox Js 2.0
Framework: Prototype / Scriptaculous
Beschreibung: Die wohl bekannteste und wenn nicht die erste, dann eine der ersten Lightboxen überhaupt. Eigent sich ausschließlich für das Anzeigen von Bildern.

Control.Window
Framework: Prototype / Scriptaculous
Beschreibung: Eine nicht ganz so verbreitete Lightbox. Speziell das positionieren der Box sowie die Möglichkeit die Box mittels Drag´n´drop zu verschieben zeichnen diese Variante aus. Sie kann auch alternativ zum anzeigen von Tooltips eingesetzt werden.

EnlargeIt!
Framework: Standalone
Beschreibung: Auch nicht ganz so bekannt, dafür kommt dieser Lightbox Ableger mit ein paar netten Extras daher. So kann man z.B. ganze Seiten in einem iFrame darstellen und hat dich Möglichkeit innerhalb dessen zu Navigieren. In der Demo Machine bekommt man einen ganz guten Überblick über die etlichen verschiedenen Einstellungsmöglichkeiten dieser Box.

Facebox 1.2
Framework: jQuery
Beschreibung: Eine kleine Lightbox im Stil von Facebook. Ermöglicht das anzeigen von Bildern, Div´s oder ganzen Seiten.

FancyZoom 1.1
Framework: Standalone
Beschreibung: FancyZoom ist eine meiner persönlichen Lieblings-Lightboxen. Die Darstellung der Bilder mit Schlagschatten und die abgerundeten Ecken für die Title´s zeichnen diese Box besonders aus. Die Implementierung der Box ist mit nur 2 Zeilen Javascript ist ein Kinderspiel. Desweiteren lädt FancyZoom die Vollbilder schon bei einem mouseover über die Thumbnails, was dem User eine flüssige Bedienung ermöglicht. Diese Lightbox eignet sich, im Original, optimal zum darstellen von Bildern. Mehr Möglichkeiten bietet sie allerdings nicht.

Von FancyZoom gibt es auch Ableger für jQuery und Portotype welche auch das Darstellen anderer Inhalte ermöglichen.

FancyBox
Framework: jQuery
Beschreibung: Lightbox zum Darstellen von Bildern, HTML- und Multi-Media-Inhalten im Mac-Style.
FancyBox ähnelt, wie der Name schon sagt, stark FancyZoom. Die Darstellung der Inhalte erfolgt mit ausgegrautem Hintergrund, Schlagschatten und abgerundeten Ecken beim Title.

Floatbox
Framework: Standalone
Beschreibung: Floatbox zählt wohl auch zu den weniger verbreiteten Lightboxvarianten, kommt aber mit einer Menge an Features, wie z.B. dem darstellen von Einzelbildern, Bildergalerien, Slideshows, Ajax-HTML-Content, iFrame-Inhalten, Flash, Quicktime und anderen, daher.
Auf der offiziellen Floatbox-Website kann man sich einen ganz guten Überlick über die vielen Möglichkeiten dieses Lightboxablegers verschaffen.

GreyBox
Framework: Standalone, jQuery
Beschreibung: GreyBox ist mit nur 22KB eine der kleineren Lightboxvarianten, was sich allerdings nicht in ihrem Funktionalitätsumfang bemerkbar macht. Was GreyBox von den meisten anderen Lightboxen unterscheidet ist die Möglichkeit Website-Gallerien zu definieren. Damit hat man die Möglichkeit mittels vor- und zurück-Buttons durch ein Set von Websites zu navigieren. Standards wie das anzeigen von Einzelbildern und Bildergallerien sind natürlich auch vorhanden. Die Installation ist einfach und die Anzeige lässt sich mittels CSS einfach und leicht anpassen.
Von GreyBox gibt es auch einen jQuery-Ableger (GreyBox Redux) .

Highslide JS
Framework: Standalone
Beschreibung: Highslide ist eine Lightbox mit einer Vielzahl von Möglichkeiten. Das anzeigen von Bildern, Gallerien mit Slideshow und Drag´n´Drop, HTML-Inhalten, AJAX-Content, Flash und anderem sind möglich. Highslide bietet mit dem Configurator, anhand von Beispielen, einen guten Überblick über den Funktionsumfang dieser Lightboxvariante.

iBox v2
Framework: Standalone
Beschreibung: Eher der Vollständigkeit wegen hier mit aufgenommen, kommt diese Lightbox mit den üblichen Standards (Einzelbilder, Inline-Inhalte, AJAX und multi-media) daher. Mehr kann diese Box nicht und ist, meiner Meinung nach, auch nicht sonderlich attraktiv. Daher gibts an dieser Stelle auch nicht mehr dazu zu sagen.

Interface Imagebox
Framework: jQuery
Beschreibung: Ähnelt start stark der original Lightbox. Eignet sich zum anzeigen von Bildern und Bildergruppen. Mir persönlich gefällt vorallem die blockige Schrift in den Buttons nicht. Fazit, kein Highlight.

ImageZoom
Framework: MooTools
Beschreibung: ImageZoom ist wohl auch eine der nicht ganz so bekannten Lightboxvarianten, was evtl. daran liegen mag das sie “nur” in der Lage ist Bilder und Bildergruppen darzustellen. Wenn man allerdings eine Box sucht die nicht mehr können muss, dann ist ImageZoom, nicht zuletzt aufgrund der schönen Wechsel zwischen Bildern innerhalb einer Bildergruppe und der Drag´n´Drop-Möglichkeit der Bilder, sicherlich eine Überlegung Wert. Mir persönlich gefällt sowohl das öffnen und schließen der Bilder, sowie die Navigation durch die Bilder einer Gruppe gut. Wie die meisten Boxen kommt auch diese mit einer Vielzahl von Einstellmöglichkeiten wie z.B. dem festlegen des Startelements, Overlay ja/nein, Overlayfarbe uvm. daher. Ein Blick lohnt sich also.

jQuery lightBox plugin
Framework: jQuery
Beschreibung: Lighter Box. Der Name ist Programm. Diese Lightbox-Variante ist mit nur 7.7kb inkl. aller files wie loader, closebuton, overlay usw sehr klein gehalten. Das ganze läuft Problemlos auf allen gängigen Browsern. Für jemand der ne einfache Lightbox ohne viel schnick-schnack sucht sicher eine gute Wahl.

Leightbox
Framework: prototype
Beschreibung: Kleine Simple Lightbox auf Prototype. Nix besonderes. Ermöglicht das einbinden von inline-Divs statt Ajax-aufrufen.

Lightbox Gone Wild!
Framework: prototype
Beschreibung: Nicht die kleinste Lightbox-Variante. Dafür auch nicht die umfangreichste Ausser dem verarbeiten von Ajax-Inhalten kann diese Box nicht wirklich viel. Es gibt besseres!

to be continued…

mysrc.de » Lightbox

jQuery – Accessible-RIA – Widgets für jedermann

Ähnliche Artikel

Lightboxen im Überblick – oder Popup´s im Web 2.0

Ähnliche Artikel