PrestaShop gallery on CMS page

important Info! please note that this guide is based on PrestaShop 1.5.x. If you're looking for solution for PrestaShop 1.6.x or 1.7.x check this guide: new tutorial about cms gallery in PrestaShop 1.6.x and 1.7.x

 

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

fancybox prestashop cms page gallery

 

 

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

prestashop cms page gallery

 

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

cms fancybox code

 

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.

 

fancybox cms page

 

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

image thumbnail

 

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

add hyperlink cms page prestashop

 

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.

advanced tab insert hyperlink

 

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:

fancybox cms gallery

 

 

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

fancybox prestashop cms page gallery

 

 

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim