Add FancyBox Lightbox on CMS pages in Prestashop 1.4

Prestashop 1.4 uses FancyBox lightbox script to show product images on product pages. But when we want to reuse fancybox script on CMS pages, i.e. for displaying big image from a thumbnail, we will notice that fancybox script is available on product page only. Therefore we must enable it on CMS pages as well. We will use controller override to be able to upgrade Prestashop without problems.

First, as usual, enable compile, disable caches and create a PHP file called CMSController.php in /override/controllers/

Now put this code in:

<?php
class CmsController extends CmsControllerCore {
    public function setMedia() {
        parent::setMedia();
        Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
        Tools::addJS(array(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
                           _PS_JS_DIR_.'jquery/jquery.serialScroll-1.2.2-min.js',
                           _THEME_JS_DIR_.'product.js'));
        if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {
            Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');
            Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
        }
    }
}

Save the file. Now check that Fancybox script is already present at the source of your CMS page. The controller override enables Fancybox script on all CMS pages.

To use Fancybox just add class="thickbox" to any thumbnail link. If you want to have a gallery of images with Previous / Next navigation on opened Lightbox, use also rel="SomeGalleryName" on that link.

<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>

The title on link will be shown on opened lightbox below the image.

Here’s the example of such Fancybox gallery.