Vorheriger Artikel Nächster Artikel

Fresco: Script für Voll-Responsive-Lightbox dank HTML5 und jQuery

Das Web ist voll mit unterschiedlichen Lightbox-Skripten. Fresco profiliert sich vor allem durch die Tatsache, dass es voll-responsiv ist. Was das Skript außerdem zu bieten hat und ob es demnächst den Weg in eure Projekte finden könnte, erfahrt ihr in diesem Artikel.

Fresco: Script für Voll-Responsive-Lightbox dank HTML5 und jQuery
Fresco Lightbox

Fresco zeichnet sich durch ein sehr ansprechendes, minimalistisches Design aus, das zudem voll responsiv ist und somit auf jeder Bildschirmgröße eine optimale Anzeigeleistung bietet. Dank und funktioniert das Skript auf allen zeitgemäßen Browsern.

Fresco Lightbox

Für den Betrieb von Fresco wird jQuery 1.4.4 oder neuer benötigt. Um eine Lightbox erzeugen zu können, muss das Skript nach jQuery in der Webseite eingebunden werden. Anschließend stehen verschiedene Möglichkeiten für den Aufruf einer Fresco-Lightbox zur Verfügung.

Die Einfachste dürfte – wie von vielen anderen Lightbox-Skripten gewohnt – das Einbinden als Link sein. Alle mit der „fresco“-Klasse versehenen Links, werden automatisch verarbeitet. Über das „data-fresco-caption-Attribut“ kann dem Bild eine Überschrift zugewiesen werden. Mit „data-fresco-options“ können zusätzliche Einstellungen übergeben werden. Fresco unterstützt außerdem Bildgruppen, die mit „data-fresco-group“ definiert werden können.

<a href="image.jpg" class="fresco">Show image</a>
<a href="image.jpg"
class="fresco"
data-fresco-caption="Caption below the image">
Caption
</a>
<a href="image.jpg"
class="fresco"
data-fresco-caption="Caption on top of the image"
data-fresco-group="example">
Caption on top
</a>

Für erweiterte Einsatz-Szenarien steht in der Pro-Version des Skriptes eine JavaScript-API zur Steuerung von Fresko zur Verfügung. Mit der API ist es möglich, deutlich tiefer und flexibler in das Skript einzugreifen.

Neben dem Einbinden von Bildern unterstützt Fresco in der Pro-Version auch YouTube- und Vimeo-Videos. Außerdem bietet Fresco einen Fullscreen-Zoom, Retina-Skins und versteht Swipe-Events auf Touch-Geräten.

Fresco - Guter Gesamteindruck trotz fehlender Features ohne Kauflizenz

Fresco ist für nichtkommerzielle Seiten in der Light-Version kostenfrei verfügbar. Leider fehlen der Light-Version neben der JavaScript-API einige Features, wie das Einbinden von Videos, die Touch-Funktionalitäten und die Thumbnail-Funktion. Aber auch ohne diese Features liefert Fresco ein gutes Endresultat. Dass einige Features, die man als Webworker teilweise schon für selbstverständlich hält, nur in der Pro-Version verfügbar sind, trübt den insgesamt sehr positiven Eindruck ein wenig.

Für kommerzielle Seiten und Webworker, die auf den vollen Funktionsumfang des Skriptes nicht verzichten wollen, steht die Pro-Version zur Verfügung. Eine Pro-Lizenz für eine Einzeldomain gibt es für 49 Euro. Für den Einsatz auf unbeschränkt vielen Servern werden 95 Euro fällig.

Vom Funktionsumfang der Lightbox könnt ihr euch auf der offiziellen Webseite von Fresco überzeugen.

 

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von orangesn am 15.02.2013 (14:07 Uhr)

    Mich hat für meinen Blog fancyBox 2 überzeugt. Video & Co sind mit drin. Lediglich eine kommerzielle Nutzung erfordert eine Lizenz. Aber bei der Leistung ist das angemessen.
    http://fancyapps.com/fancybox/
    Lässt sich ggf. auch über ein Plugin integrieren. Die meisten sind jedoch noch mit der 1er Version ausgestattet.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
CSS- und HTML5-Templates: 6 Quellen für dein nächstes Webprojekt
CSS- und HTML5-Templates: 6 Quellen für dein nächstes Webprojekt

Viele Websites und Landingpages lassen sich problemlos mit einem Template umsetzen. Zahlreiche CSS- und HTML5-Templates laufen unter einer Creative-Commons-Lizenz und können kostenlos genutzt … » weiterlesen

Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick
Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick

Webdesigner und Entwickler eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten Software sowie unterschiedliche Programmiersprachen und Frameworks im Kopf zu … » weiterlesen

Der schönste Tag eures Lebens: W3C stellt HTML5 fertig
Der schönste Tag eures Lebens: W3C stellt HTML5 fertig

Heute schon in HTML5 geschrieben? Spätestens jetzt ist der richtige Zeitpunkt dafür, denn die W3C hat HTML5 zur „Recommendation“ gekührt, was de facto den Abschluss des Standardisierungs-Prozes … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen