Drücke die Tasten ◄ ► für weitere 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.

 

80 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
2 Antworten
  1. von orangesn am 15.02.2013 (14:07Uhr)

    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.

  2. von Fresco: Script für Voll-Responsive-Ligh… am 20.02.2013 (10:38Uhr)

    [...] Fresco: Script für Voll-Responsive-Lightbox dank HTML5 und jQuery » t3n – Das Magazin für D.... Teilen mit:StumbleUponPinterestGoogle +1LinkedInTumblrRedditFacebookDiggTwitterE-MailDrucken [...]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema jQuery
Basket.js: Bessere Performance beim Caching mit „Web Storage“
Basket.js: Bessere Performance beim Caching mit „Web Storage“

Basket.js nutzt localStorage zum Cachen von Skripten. Wir verraten dir, welche Vorteile das hat und wie du Basket.js nutzen kannst. » weiterlesen

jQuery: 13 Plugins für euer nächstes Webprojekt
jQuery: 13 Plugins für euer nächstes Webprojekt

Webentwicklung ohne JavaScript, im Besonderen jQuery, ist heute fast nicht mehr vorstellbar. Deswegen zeigen wir euch 13 jQuery-Plugins, die ihr vielleicht noch nicht kennt, aber unbedingt... » weiterlesen

1.000 Euro Belohnung: t3n.de sucht einen Frontend-Developer (HTML5/CSS/JS) (m/w)
1.000 Euro Belohnung: t3n.de sucht einen Frontend-Developer (HTML5/CSS/JS) (m/w)

Zur Unterstützung unseres Entwicklerteams suchen wir ab sofort einen Frontend-Developer (m/w). Du kennst jemanden, der gut zu der Stelle passen könnte? Dann sicher Dir unsere Belohnung in Höhe... » weiterlesen

Kennst Du schon unser t3n Magazin?

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