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.

 

Share:
This entry was posted in PrestaShop and tagged . Bookmark the permalink.

11 Responses to Add FancyBox Lightbox on CMS pages in Prestashop 1.4

  1. Василий анатольевич Кабасик says:

    How to add a text in modal window?

  2. Vivekananda says:

    Hi

    I am in real need..

    Can you please help me how to add Jquery UI Tabs in Home Page center column using
    Controler etc..

    Evn i want my own CSS.

    Regards
    Vivek Sakhilati

  3. Camilla says:

    Hi!

    I use PS 1.5.4.1 and can’t get it to work.

    Is there changes in the new PS so it does not work?

  4. Bilal says:

    For PS 1.5.4.1
    In CmsController:
    public function setMedia()
    {
    parent::setMedia();

    if ($this->assignCase == 1)
    $this->addJS(_THEME_JS_DIR_.’cms.js’);

    $this->addCSS(_THEME_CSS_DIR_.’cms.css’);

    $this->addCSS(_PS_CSS_DIR_.’jquery.fancybox-1.3.4.css’, ‘screen’);
    $this->addJqueryPlugin(array(‘fancybox’, ‘idTabs’, ‘scrollTo’, ‘serialScroll’));
    $this->addJS(array(
    _THEME_JS_DIR_.’tools.js’,
    _THEME_JS_DIR_.’product.js’
    ));
    }

    No change for tpl

  5. neich says:

    hey, thank you for the tip. I am trying to make it work in Prestashop 1.5 but no results. Do you know if it works in latest versions?

  6. hadey says:

    Thank you very much
    this fantastic

  7. Javier says:

    FOR PRESTASHOP 1.5.4

    1. File CMSController.php:

    Path : OVERRIDE/CONTROLLERS/FRONT

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

    Then:
    2. In the CMS photo link

    <a href="/img/cms/big_photo.jpg" title="title" rel="nofollow"></a>

    3. Delete class_index.php from cache folder

    slds.

  8. Javier says:

    2. In the CMS photo link

    /*
    //<a href="/img/cms/imagen_grande.jpg" title="titulo" rel="nofollow"></a>//*/
    
  9. I was wondering if you could post the code for version 1.6.

    Thank you and let me know

    Dave

Leave a Reply

Your email address will not be published. Required fields are marked *