Erstellen von Galerien mit Fancybox

Veröffentlicht: 22. Dezember 2015 (Zuletzt geändert am 19. Juli 2019)
0 Kommentare
Enthalten in einer Kategorie: Website
Teil 6 von 10 in der Beitragsreihe 'Automatisierung statischer Webseiten'

Aktualisierung vom 19.07.2019: Diese Webseiten werden nicht mehr mit dem Python-Script erzeugt, das hier beschrieben wird. Stattdessen nutze ich jetzt Worldpress und das Plugin Photo Gallery um Galerien zu erstellen. Das Skript selbst funktioniert aber weiterhin problemlos für statische Webseiten.

An eine Fotogalerie werden hohe Ansprüche gestellt. Es soll nicht nur komfortabel bedienbar sein, sondern muss auch schnell und modern ankommen. Dies ist ohne PHP und ohne Datenbank gar nicht so leicht zu erfüllen, aber mit Fancybox ist es möglich. Wie? Das beschreibe ich im sechsen Teil der Artikelserie zur Automatisierung statischer Webseiten.

Bereits im vierten Teil dieser Artikelserie habe ich einiges zu Fancybox erläutert. Dort ging es um das automatische Skalieren von Grafiken und das Verlinken in Artikeln. All die dort beschriebenen Funktionen kommen auch bei den Galerien zum Einsatz. Zusätzlich kommen aber noch die speziellen Galeriefunktionen von Fancybox hinzu. Um diese nutzen zu können, müssen die entsprechenden Funktionen und Stylesheets im HTML Dokument eigebunden werden, wie der nachfolgende Code zeigt.

<script type="text/javascript" src="/js/libs/jquery.fancybox.js?v=2.1.5"></script> <!-- Fancybox 2.1.5 -->
<link rel="stylesheet" type="text/css" href="/css/libs/jquery.fancybox.css?v=2.1.5" media="screen" /> <!-- Fancybox 2.1.5 -->
                
<script type="text/javascript" src="/js/libs/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Mouseweel Support-->
<script type="text/javascript" src="/js/libs/jquery.fancybox-buttons.js?v=1.0.5"></script> <!-- Button helper -->
<script type="text/javascript" src="/js/libs/jquery.fancybox-thumbs.js?v=1.0.7"></script>  <!-- Thumbnail helper -->
<link rel="stylesheet" type="text/css" href="/css/libs/jquery.fancybox-buttons.css?v=1.0.5" /> <!-- Button helper -->
<link rel="stylesheet" type="text/css" href="/css/libs/jquery.fancybox-thumbs.css?v=1.0.7" /> <!-- Thumbnail helper -->

Die oberen beiden Zeilen sind für die Basisfunktionen von Fancybox notwendig und werden benötigt sobald eine Grafik mit Fancybox dargestellt werden soll. Einfache Galerien sind bereits mit diesen Basisfunktionen möglich. Mit den weiteren Zeilen werden spezielle Funktionen zur Galerie hinzugefügt. Hier bindet man all das ein, was man gerne haben möchte. Der Mouseweel-Support beispielsweise sorgt dafür, dass die einzelnen Fotos der Galerie mit dem Mausrad durchgeblättert werden können. Der Thumbnail-Helper blendet kleine verlinkte Vorschaubilder für jedes Foto der Galerie am unteren Bildschirmrand ein. Es ist schon erstaunlich, dass dies alles nur mit Javascript und HTML5 möglich ist.

Wie schon gesagt, kommen alle Funktionen des automatischen Skalierens von Grafiken zum tragen. Der nachfolgende Code-Ausschnitt zeigt eine Grafik innerhalb einer Galerie im HTML-Quelltext. In der ersten Zeile steht der Code, wie er während des Erstellens der Galerie geschrieben wird. Die zweite Zeile zeigt den durch das Skript bearbeiteten Link in dem nicht nur zwei neue Grafiken aus der angegebenen Grafik erzeugt wurden, sondern auch ein Miniaturbild eingefügt ist.

<a class="fancybox_gallery" href="IMG_0944.JPG" data-fancybox-group="g1" title="Bildunterschrift"></a>
                
<a class="fancybox_gallery" href="IMG_0944_big.jpg" data-fancybox-group="g1" title="Bildunterschrift"><img src="IMG_0944_small.jpg" alt= /></a>

So weit also nichts neues. Der Unterschied zu Einzelbildern besteht in der Eigenschaft data-fancybox-group der Verlinkung. Diese sagt dem Javascript hinter Fancybox, dass diese Grafik zusammen mit anderen, die den gleichen Wert (hier g1) haben, zu einer Galerie gehört. Das ist eigentlich schon alles, was im HTML-Code anders ist.

Es gibt aber noch die Möglichkeit die Art und Weise, wie Fancybox die Grafiken darstellen und sich allgemein verhalten soll festzulegen. Dies geschieht über ein Stück Javascript direkt im head der HTML-Seite unter dem script-Tag. Damit ich den folgenden Code nicht immer wieder manuell in das HTML-Dokument eintragen muss, nutze ich die Möglichkeit zum Inkludieren von Dateiinhalten in HTML, die mir mein eigenes Python-Skript bietet.

$(document).ready(function() {
    // Default fancybox for normal photos
	$(".fancybox").fancybox({
	    padding: 0,
		openEffect : 'elastic',
		openSpeed  : 150,
		closeEffect : 'elastic',
		closeSpeed  : 150,
		closeClick : true,
		helpers: {
			title : {
				type : 'inside'
			}
		}
	});
	
	// fancybox for galleries
	$(".fancybox_gallery").fancybox({
		padding: 0,
		openEffect : 'elastic',
		openSpeed  : 150,
		closeEffect : 'elastic',
		closeSpeed  : 150,
		closeClick : true,
		helpers : {
			title : {
				type : 'inside'
			},
			buttons	: {},
			thumbs : {
				width  : 50,
				height : 50
			}
		},
		afterLoad : function() {
			this.title = 'Bild ' + (this.index + 1) + ' von ' + this.group.length + (this.title ? ' - ' + this.title : '');
		}
	});
});

Dieses Skript wird ausgefügt, sobald die Seite geladen wurde, was mit $(document).ready(function() mitgeteilt wird. Es enthält das Setzen verschiedener Eigenschaften für Fancybox sowohl für Einzelgrafiken (mit der Klassenangabe .fancybox) als auch für jede Grafik innerhalb einer Galerie (.fancybox_gallery). Als Ein- und Ausblendeffekt nutze ich elastic mit einer Zeit von 150 Millisekunden. Die Eigenschaft inside für den Titel blendet den Wert der title-Eigenschaft des Links zur Grafik (siehe zweites Codebeispiel) mit in die Grafik ein. Für die Galerie kommen weitere helper zum Einsatz. Dies sind die erwähnten Miniaturansichten (thumbs) mit einer Größe von 50×50 Pixeln sowie Buttons, die über dem geöffnetem Bild eingeblendet werden. Mit diesen Buttons können die Bilder der Galerie durchgeschalten und eine Diashow gestartet werden. Die afterLoad-Funktion sorgt dafür, dass vor der Beschreibung des Bildes (im title) eine Anzeige wie z.B. “Bild 1 von 20” angezeigt wird. Diese Einstellungen reichen bereits aus um eine wirklich gut funktionierende Bildergalerie mit modernen Funktionen zu erstellen.

Damit die Einzelbilder der Galerie auf der HTML-Seite gut zur Geltung kommen, gibt es noch einige spezielle CSS-Eigenschaften, die ich an dieser Stelle auch noch zeigen möchte. Im folgenden Codeausschnitt habe ich einige für die Kompatibilität mit älteren Browsern notwendigen Eigenschaften aus Übersichtsgründen entfernt.

@charset "UTF-8";

a.fancybox-gallery img
{
    border: none;
    box-shadow: 0 1px 5px rgba(0,0,0,0.6);
    transform: scale(1,1);
    transition: all 0.2s ease-in-out;
}

a.fancybox-gallery:hover img
{
    position: relative;
    z-index: 999;
    transform: scale(1.03,1.03);
}

.articlefull p img
{
    width: 100%;
}

@media all and (min-width: 600px)
{
    
.articlefull p img
{
    width: 19%;
    min-width: 200px;
}

}

Durch die Eigenschaft box-shadow: 0 1px 5px rgba(0,0,0,0.6); erhält das Bild einen leichten Schatten, was es leicht schwebend wirken lässt. Insbesondere in Kombination mit der 200 Millisekunden langen Transition, in der die Grafik beim Überfahren mit dem Mauszeiger (:hover) um 3% vergrößert (scale()) wird, wirkt die Galerie sehr natürlich. Natürlich wird auch das responsive Webdesign wie im ersten Artikel dieser Serie beschrieben auch bei der Galerie nicht vergessen. Ist die verfügbare Seitenbreite kleiner als 600 Pixel, so werden die Einzelbilder mit 100% Breite untereinander dargestellt. Über 600 Pixel nehmen die Einzelbilder nur noch 19% des verfügbaren Platzes, aber mindestens 200 Pixel ein. Es werden also minimal 3 Bilder nebeneinander dargestellt.

Mit Fancybox und ein klein wenig zusätzlichem Aufwand ist es auch ohne PHP oder Datenbank möglich, sehr moderne Bildergalerien zu erstellen. Zögern Sie nicht, sich den Quellcode sowie die verlinkten Scripte und CSS-Dateien anzuschauen. Haben Sie Feedback? Dann schreiben Sie mir doch. Im nächsten Teil dieser Artikelserie beschreibe ich die von mir genutzte Darstellungsweise für Panoramabilder. Vielen Dank fürs Lesen!

Vorheriger Beitrag der ReiheNächster Beitrag der Reihe

zurück

Teile deinen Kommentar oder Feedback zu diesem Beitrag.

Die Angabe der E-Mail-Adresse ist optional und wird nicht veröffentlicht. Sie wird zur Einbindung deines Gravatars und ggf. zur Kontaktaufnahme verwendet. Erforderliche Felder sind mit * markiert.

*

*

*

Durch Betätigen von "Kommentar abschicken", stimmen Sie der Veröffentlichung der eingegebenen Daten zu. Weitere Informationen finden Sie in der Datenschutzerklärung.
Sie können Quellcode über <pre><code>Quellcode</code></pre> in Kommentare einfügen.