Slimbox 2 is een script waarmee afbeeldingen kunnen worden getoond / vergroot in een fancy overlay blok. Dankzij deze techniek kunnen bezoekers eenvoudig afbeeldingen vergroten en hier doorheen navigeren. Ontwikkelaar Christophe Beyls uit België (Twitter: @bladecoder) heeft Slimbox 2 gebaseerd op het bekende Lightbox script van Lokesh Dhakar uit Baltimore (Twitter: @lokeshdhakar). Deze scripts worden inmiddels door duizenden websites gebruikt.
Slimbox 2 wordt ook veel gebruikt in WordPress websites. Ontwikkelaars gebruiken verschillende technieken om Slimbox 2 toe te voegen aan hun WordPress thema. Dit kan eenvoudig met behulp van een plugin gerealiseerd worden. Persoonlijk vind ik dat veel van deze plugins slordig zijn uitgewerkt. Daardoor is het in veel gevallen niet flexibel om gebruik te maken van deze plugins. Het heeft mijn voorkeur om Slimbox 2 ‘handmatig’ toe te voegen aan een WordPress website. Dit is relatief eenvoudig te realiseren door je WordPress functions.php thema bestand aan te passen.
Allereerst zul je Slimbox moeten downloaden vanaf de Slimbox 2 webpagina. Vervolgens pak je het ZIP bestand uit en plaats je de map “slimbox-2.04” in je WordPress thema map. Vervolgens kun je de volgende code opnemen in je functions.php bestand.
function prefix_enqueue_scripts() {
wp_register_script(
'jquery-slimbox2' ,
get_stylesheet_directory_uri() . '/slimbox-2.04/src/slimbox2.js' ,
array('jquery')
);
wp_enqueue_script(
'prefix-jquery-slimbox2' ,
get_stylesheet_directory_uri() . '/slimbox2-custom.js' ,
array('jquery', 'jquery-slimbox2')
);
wp_localize_script(
'prefix-jquery-slimbox2' ,
'slimbox2L10n',
array(
'counterText' => __('Image {x} of {y}', 'text_domain')
)
);
wp_register_style(
'jquery-slimbox2' ,
get_stylesheet_directory_uri() . '/slimbox-2.04/css/slimbox2.css'
);
wp_enqueue_style(
'prefix-jquery-slimbox2' ,
get_stylesheet_directory_uri() . '/slimbox2-custom.css' ,
array('jquery-slimbox2')
);
}
add_action('wp_enqueue_scripts', 'prefix_enqueue_scripts');
In bovenstaande code wordt voornamelijk verwezen naar Slimbox bestanden. Naast de Slimbox bestanden wordt ook verwezen naar 2 ‘custom’ (maatwerk) bestanden. Ontwikkelaars kunnen hiermee Slimbox helemaal naar eigen wens configureren. In het bestand slimbox2-custom.js kun je aangeven wanneer Slimbox geopend moet worden en eventueel extra opties definieren. Als je wil dat Slimbox opent zodra mensen op een link met het attribuut rel=”lightbox” klikken moet je daarin het volgende opnemen:
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({counterText: slimbox2L10n.counterText}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
Met behulp van het CSS bestand slimbox2-custom.css zijn eenvoudig de “Vorige”, “Volgende” en “Sluiten” buttons te wijzigen.
Naast het eenvoudig aanpassen van de vormgeving van Slimbox heeft deze constructie ook als voordeel dat je gebruik kunt maken van het WordPress vertaalmechanisme. Op veel Nederlandse website is de tekst “Image {x} of {y}” niet vertaald. Door Slimbox op bovenstaande manier te integreren in je WordPress website is de tekst eenvoudig te vertalen.
Als je gebruik maakt van de WordPress WPML plugin voor het draaien van een multitaal website zou je kunnen overwegen om ook het volgende op te nemen in je functions.php bestand:
if(defined('ICL_LANGUAGE_CODE')) {
function prefix_lang_body_class($classes) {
$classes[] = 'lang-' . ICL_LANGUAGE_CODE;
return $classes;
}
add_filter('body_class', 'prefix_lang_body_class');
}
Dankzij deze filter wordt je HTML <body> element uitgerust met een class waarin de huidige taalcode staat. Zo zullen Nederlandse berichten en pagina’s uitgerust zijn met het <body class=”lang-nl”> element en bijvoorbeeld Duitse berichten met <body class=”lang-de”>. Hierdoor kun je eenvoudig per taal verschillende afbeeldingen voor de “Vorige”, “Volgende” en “Sluiten” buttons instellen.
body.lang-nl #lbPrevLink:hover { background-image: url("images/nl-prev.gif"); }
body.lang-nl #lbNextLink:hover { background-image: url("images/nl-next.gif"); }
body.lang-nl ##lbCloseLink { background-image: url("images/nl-close.gif"); }
body.lang-de #lbPrevLink:hover { background-image: url("images/de-prev.gif"); }
body.lang-de #lbNextLink:hover { background-image: url("images/de-next.gif"); }
body.lang-de ##lbCloseLink { background-image: url("images/de-close.gif"); }
Mocht je er zelf niet uit komen om een script zoals Slimbox 2 toe te voegen aan je WordPress website neem dan gerust contact met ons. Als je deze WordPress code snippets handig vindt dan moet je ook zeker http://wpdoc.nl/ in de gaten houden. Hier zullen Nederlandse WordPress ontwikkelaars regelmatig handige code snippets op gaan plaatsen.