Fancybox images in Blog

[Yakje]

Hello,

 

I am using PrestaShop v1.6.0.9 and installed THIS blog module:

You can take a look at my site through the following link:

http://goo.gl/FLwpyz

 

Now the problem i have encountered in this blog is i can't seem to get the images in my posts to show up in a nice thickbox once clicked. This is how i tried to serve one of the images in a thickbox window:

<a class="fancybox" title="Kaarsen gieten materiaal overzicht" href="https://imkershop.nl/fotos/kaarsenmaken/n/overzicht-kaarsenmaken-imkershop.jpg"><img title="Bijenwas kaarsen gieten overzicht" src="https://imkershop.nl/fotos/kaarsenmaken/overzicht-kaarsenmaken-imkershop.jpg" alt="Overzichtkaarsen maken" width="250" height="161"></a> 

I also tried using: class="thickbox" in front of my links, but it doesn't work. Any ideas on how i could get this to work would be highly appreaciated!

Edited March 12, 2015 by Yakje (see edit history)

[Guest Kaylabs]

.

Edited January 21, 2016 by Kaylabs (see edit history)

[Yakje]

Thanks for the quick reply Kaylabs!

 

I am not known with terms like domready  , could you explain in which file i should add certain code to make it work? 

I am indeed aware of the different classes used, this was only for testing purposes.

Edited March 12, 2015 by Yakje (see edit history)

[Guest Kaylabs]

.

Edited January 21, 2016 by Kaylabs (see edit history)

[Yakje]

Thanks alot for the quick and clear explenation Kaylabs! 

 

I added the following code at the top of posts.tpl (smartblog) 

<script>
$(document).ready(function() {

    $('.fancybox').fancybox({
    });    
	
});
</script> 

In front of the image link i added: 

class="fancybox"

This is what the whole link should look like

<a class="fancybox" title="blablabla" href="https://je link.jpg">

Edited March 12, 2015 by Yakje (see edit history)

[Guest Kaylabs]

.

Edited January 21, 2016 by Kaylabs (see edit history)