Dank ihrer vielfältigen Möglichkeiten gehört die Colorbox zu den beliebtesten jQuery Lightbox Lösungen. Auch ich greife gerne und häufig bei meinen Projekten auf sie zurück.
Daß die Colorbox Bilder zu Galerien gruppieren kann, ist genauso wenig neu wie die Tatsache, daß man auf jeder Seite mehrere Galerien in ihr „abspielen“ lassen kann. Hierzu stellt Colorbox eigens das Attribut „rel“ zur Verfügung.
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});
Gemäß obigem JS-Schnipsel werden nun alle mit „gallery“ ausgezeichneten Links in einer Gruppe „gal“ mit der Colorbox geöffnet. Doch was ist, wenn man mehrere Galerien auf einer Seite hat?
$('a.gallery').colorbox({rel:'gal'});
$('a.gallery2').colorbox({rel:'gal2'});
$('a.gallery3').colorbox({rel:'gal3'});
...
Naja, das funktioniert natürlich, aber es ist keine wirklich elegante Lösung. Es bläht den Quellcode auf und bei dynamisch ausgegebenen Inhalten muß man beim Wechsel der Lightbox-Lösung auch an die PHP-Dateien oder die entsprechenden Templates ran, die für jede einzelne Galerie den Output samt css-Auszeichnung entsprechend generieren müssen.
Normalerweise weiß stackoverflow alles, aber hierfür habe ich dort keine Lösung gefunden. Hätte ich mal besser in die Dokumentation gekuckt, dort steht es nämlich in großen Lettern:
// Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
var url = $(this).attr('href');
return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});
Und was in diesem Beispiel für den Titel klappt, das klappt natürlich grundsätzlich auch für das rel-Attribut. Also fix rangemacht, jeder Galerie ein „data-gallery“ Attribut zugewiesen, das per jQuery ausgelesen und an die Colorbox übergeben wird:
<a class="colorbox" href="..." title="..." data-gallery="[ identifier ]">
<img src="..." alt="..." />
</a>
Schon kann man, völlig ohne Inline-JS und mit nur einem jQuery-Selektor eine Vielzahl Galerien ansprechen:
$(document).ready(function(){
$('a.colorbox').colorbox({rel: function(){
return $(this).attr('data-gallery');
}});
});
Natürlich lassen sich auch andere Optionen der Colorbox entsprechend steuern. Html5 lässt einem erfreulicherweise ja sehr viel Freiheit bei den data-Attributen.