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
Hybride App-Entwicklung: 7,5 Frameworks, die du kennen solltest
Hybride App-Entwicklung: 7,5 Frameworks, die du kennen solltest

Entwickler, die nativen Code pro Endgerät schreiben, lieben natürlich ihren Code. Aber was ist, wenn die App auch auf anderen Plattformen laufen soll? Richtig, die selbe App muss dann nochmal für … » weiterlesen

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

WordPress, TYPO3, Drupal und Co.: Die wichtigsten Updates für die wichtigsten CMS
WordPress, TYPO3, Drupal und Co.: Die wichtigsten Updates für die wichtigsten CMS

Abseits der großen Major-Releases gibt es bei den bekannten CMS (und einem Blog-System) natürlich auch regelmäßig kleinere Updates. Die aus dem Monat April stellen wir euch hier kurz vor. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n 40 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen