Add fancybox to image in CMS pages

[dnugent]

Hi I have been all over this forum on how to add fancybox to my cms pages for some images that users have to click on to see the large image and download that image.

 

Can someone please point me in the right direction.

 

I have tried this to no avail

 

<p>this is a test page</p>

<a class="fancybox" href="http://localhost/prestashop/img/cms/Gun%201911%20Standard.jpg"><img width="100" height="60" alt="whatever you want as alt text" src="http://localhost/prestashop/img/cms/Gun%201911%20Standard_small.jpg" /><br /><br /><br /></a>

 

but it just pops up a new page not in fancybox ??

 

Dave

[presta.show]

HI,

 

You have to check lib path in head section, and check script for loading object fancybox:

 

<script>$("a.fancybox").fancybox();</script>

 

Open browser console and check if exists any javascript error .

 

[dnugent]

OK - here is pretty good solution, but I dont know if I am there or not (have not test this yet)..

 

<?php

class CmsController extends CmsControllerCore {

    public function setMedia() {

        parent::setMedia();

 

        Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox.css', 'screen');

        Tools::addJS(array(_PS_JS_DIR_.'js/jquery/plugins/jquery.fancybox.js',

                           _PS_JS_DIR_.'jquery/jquery.serialScroll-1.2.2-min.js',

                           _THEME_JS_DIR_.'prestashop/themes/theme1062/js/product.js'));

 

        if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {

            Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');

            Tools::addJS(_PS_JS_DIR_.'js/jquery/plugins/jquery/jqzoom/jquery.jqzoom.js');

        }

    }

}

 

This does indeed call the fancybox.js file in the CMS files (all of them for that matter) as I can see it in the scripts section of the dev tools - now if some can pipe in here to say YES that will work

 

that would be GREAT!

 

Dave

Edited May 20, 2015 by dnugent (see edit history)

[defuzed]

loading the fancybox files through a controller override is the best way yes! But you only need some of those files you are including, just do:

<?php
class CmsController extends CmsControllerCore {
    public function setMedia() {
        parent::setMedia();
 
        Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox.css', 'screen');
        Tools::addJS(_PS_JS_DIR_.'js/jquery/plugins/jquery.fancybox.js');

    }
}

you will also need to call fancybox for the appropriate element as prestashow.eu said. I don't think you're allowed to place <script> tags through the cms WYSIWYG so just paste the line from prestashow.eu at the bottom of the cms.tpl

[dnugent]

Thanx - I will test it out tommorow

 

Dave

[dnugent]

I will be doing my testing on this later in the week

 

and adding this to get it to work properly for those who want to know

 

<a class="thickbox" rel="gal1" href="/img/cms/big/001.jpg" title="Picture Title">
<img src="/img/cms/thumbnail/001.jpg" alt="Thumbnail Alt" /></a>

[dnugent]

OK here is a link to make it work:

 

Follow exactly and all will work.

 

http://mypresta.eu/en/art/developer/gallery-on-cms-page-fancybox.html

 

Also if you cannot get the tiny editor to show up properly, just add the class="fancybox" to the <a href>

 

This is working in version 1.6.09

 

Dave 

[dnugent]

Does anyone know what will happen to these files on an upgrade of the shop - will they get over-written?

 

Dave

[defuzed]

Overrides will not get overwritten when you upgrade

[tiendatutorial]

try this