Foto popup FancyBox

In het CMSMS forum werd gevraagd hoe je een foto popup kunt maken bij het openen van een website. Er zijn verschillende manieren om dit voor elkaar te krijgen.

Een beproefde methode is via FancyBox, om precies te zijn met de fancybox().trigger('click') functie.

Fancybox is gebasseerd op JQuery en kan je hier downloaden.

Installeer JQueryTools

JQuery en Fancybox dien je handmatig te installeren maar het is ook mogelijk om de JQueryTools module te installeren. De JQueryTools module installeerd FancyBox en ook vele andere JQuery tools automatisch.

• Extensions -> Module Manager -> [j] JQueryTools installeer.

Upload een plaatje naar je website

• Content -> Image Manager -> Upload File (noem deze foto1.jpg)

Voeg het plaatje toe aan de homepage

• Content -> Pages :

<div>
<a href="/uploads/images/foto1.jpg" id="foto_1"><img class="" src="/uploads/images/thumb_foto1.jpg" alt="" /></a> 
</div>

Als je het plaatje wat geopend moet worden niet zichtbaar wilt hebben op het moment dat je deze sluit kan je de div onzichtbaar maken.

<div style="display: none;">
<a href="/uploads/images/foto1.jpg" id="foto_1"><img class="" src="/uploads/images/thumb_foto1.jpg" alt="" /></a> 
</div>

Voeg javascript code toe aan je homepage

Onderstaande code zorgt ervoor dat het plaatje, de fancybox geopend wordt op het moment dat de pagina is ingeladen.

• Content -> Pages -> Options "Page Specific Metadata:"

{JQueryTools action=incjs}

[literal]

<script type="text/javascript">

    $(document).ready(function() {

        $("a#foto_1").fancybox({
            'overlayOpacity'        : 0.70,
            'hideOnContentClick'    : true,
            'overlayShow'           : true 
        });

        $("a#foto_1").fancybox().trigger('click');

});

</script>

[/literal]