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.
How to add a text in modal window?
title on link will add image name inside thickbox
You can add lightbox on all page of your site with this module:
for ps 1.4: http://www.store-opart.fr/modules/6-opartajaxpopup-14x.html
for ps 1.5: http://www.store-opart.fr/modules/4-opartajaxpopup.html
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
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?
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
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?
Thank you very much
this fantastic
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
3. Delete class_index.php from cache folder
slds.
2. In the CMS photo link
I was wondering if you could post the code for version 1.6.
Thank you and let me know
Dave