PrestaShop gallery on CMS page

I've noticed that many merchants ask about gallery on CMS pages. Today I want to show you how easily you can create own fancybox gallery on CMS pages. Before we start you will need to extend tinyMCE CMS editor . Please follow this guide and then, we can start to create own gallery!

Gallery on CMS page based on fancybox script

CMSController edit

It will be necessary to change CMSController.php file located in /controllers/front/ directory. We need to include fancybox script and css files for each CMS page.  So, please open this file:  /controllers/front/CMSController.php.  There is a function  public function setMedia(), it looks like:

    public function setMedia(){ parent::setMedia(); if ($this->assignCase == 1) $this->addJS(_THEME_JS_DIR_.'cms.js');
    $this->addCSS(_THEME_CSS_DIR_.'product.css'); $this->addCSS(_THEME_CSS_DIR_.'cms.css'); }

To add fancybox .css file and fancybox .js file we need to include these files with $this->addJS and $this->addCSS code. we need to add there code:

    $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen'); $this->addJqueryPlugin('fancybox');

Full code of public function setMedia(); should looks like now:

    public function setMedia(){ parent::setMedia(); if ($this->assignCase == 1) $this->addJS(_THEME_JS_DIR_.'cms.js');
    $this->addCSS(_THEME_CSS_DIR_.'product.css'); $this->addCSS(_THEME_CSS_DIR_.'cms.css'); $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css',
    'screen'); $this->addJqueryPlugin('fancybox'); }

Okay, now these libraries will be included to each CMS page. Now it's time to build own gallery. I will show you how to do this. It's time to create / edit CMS page! Before this, make sure that you followed guides described here:  Extend tinyMCE CMS editor .

Prestashop CMS page editor

Log in to your PrestaShop back office and open preferences > CMS tab. Create new page or just edit page that already exists there. For this tutorial i created new page named "Gallery". On CMS pages list just click on "edit" button near page that you've got / created.

List of created CMS pages in prestashop > cms tab

Then we have to add there little javascript which will run fancybox script. We want to add fancybox effect for hyperlinks with .fancybox CSS class. In this case we have to use this code:

    <script type="text/javascript"> $(document).ready(function() { $("a.fancybox").fancybox(); }); </script>

To insert this code please click on blue HTML button (I show it on image below) and then just paste this code to HTML Source Editor. After that - click on "update" button. Just take a look how it looks like on the picture below.

HTML editor in tinyMCE - prestashop > cms edit page

Now it's time to create some content. Create any content you want. Everything depends on you, I created something like below. in place where you see "i want to create gallery here" i want to insert pictures with fancybox effect.

To create gallery we must have two pictures: thumbnail and large image. I will use images from my demo store located here: demo.mypresta.eu. I will create thum for product picture. Thumbnail is: http://demo.mypresta.eu/15-home_default/ipod-nano.jpg   large image:  http://demo.mypresta.eu/15-large_default/ipod-nano.jpg

Click on "Insert image" buton and paste url to your thumbnail image. exactly as i show below:

1) click on insert image button

2) to field "Image URL" paste url to your thumbnail image (in this case:  http://demo.mypresta.eu/15-home_default/ipod-nano.jpg )

3) click on insert button

Then to added image we have to add hyperlink (url) to our large image. We have to:

1) click on thumbnail image

2) click on add hyperlink button

3) to the Link URL field add url to large image ( in this case:  http://demo.mypresta.eu/15-large_default/ipod-nano.jpg  )

4) in insert/edit link open ADVANCED tab

regarding to the: 4) in insert/edit link open ADVANCED tab

1)open it

2) to the Classes field insert "fancybox" exactly as i show below. then just click on update button.

It's ready now!  Your first image in gallery is attached properly. You can add as many pictures as you want, everything depends on you. I created many gallery elements:

and the final effect is: nice fancybox gallery on cms page