Fancybox plugin in een Genesis Thema

Fancybox lightbox voor Genesis Thema's

Dit artikel laat zien hoe je de Fancybox lightbox plugin implementeert in een Genesis WordPress thema door een aantal kleine aanpassingen aan de functions.php binnen het geïnstalleerde thema.

Download Fancybox

De Fancybox plugin kan worden gedownload middels deze link: Fancybox website.

Na de installatie plaatsen we de plugin in een nieuwe directory binnen het geïnstalleerde Genesis thema. Ik gebruik hiervoor een directory genaamd javascript. Je mag ook een andere directory gebruiken, maar dan moet je in de broncode die hieronder wordt beschreven, hier rekening mee houden.

Binnen de directory javascript kopiëren we de gehele uitgepakte plugin, zodat de volgende structuur onstaat:

Thema aanpassing

De enige aanpassing die we maken aan het Genesis thema, doen we in de functions.php.

Invoegen Fancybox CSS

Invoegen Fancybox Javascript

Het voorbeeld hierboven laadt de Fancybox JavaScript alleen als de getoonde content een bericht (is_post) of een pagina (is_page) is. Dus in de admin wordt de JavaScript ook niet onnodig geladen.

Javascript om Fancybox te activeren

Ik heb in de javascript directory een javascript bestandje opgenomen: loadfancybox.js.  Deze kunt u ook opnemen in een andere javascript bestand, maar dit maakt het even duidelijk hoe het werkt.

De mogelijkheid bestaat dat de “.entry-content” moet worden aangepast op jouw eigen situatie. De Fancybox wordt alleen actief op de afbeeldingen in de content van het bericht, niet op sidebar of andere widget areas.

Bekijk de Fancybox documentatie voor alle mogelijke parameters die je kan instellen. Het voorbeeld hierboven maakt een mooie Fancybox zonder enige poespas.

Johan van de Merwe

Johan van de Merwe is sinds 1985 werkzaam in de automatisering. In 2007 heeft hij Enovision GmbH opgestart, welke is gespecialiseerd in internet toepassingen, presentatie en coaching. Voor Websprinter is hij werkzaam als internet coach voor het MKB.

You may also like...

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *