Jump to content

Fancybox Popup for CMS Pages


Recommended Posts

Hello,

 

I'm trying to have a size chart open up in a fancybox popup when someone clicks on a link I have for a CMS page that shows a sizing chart for my products. The link is in my product description. I tried using the "insert/Edit Link" option in the product description editor but couldn't find anything that would do this. Even the Javascript popup option didn't do what I wanted, it just opened a new window with my sizing chart displayed in my middle frame.

 

Is there an easy way to do this or a module I can download?

 

Thanks!

Alex

Link to comment
Share on other sites

Thanks... I read it all but can't figure it out for the life of me.... Where would I add all this code?

 

And that didn't seem like it was for Prestashop 1.5... I thought maybe they had something built in or the code could be different for version 1.5... No?

Link to comment
Share on other sites

  • 2 months later...

they seem to make it so hard.

****

override/controllers/front/cmsController.php

*****

 

<?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/thickboxjqzoom.css', 'screen');

Tools::addJS(_PS_JS_DIR_.'jquery/plugins/jqzoom.js');

}

}

}

 

 

 

Then i use in my cms page.

 

<a class="thickbox" href="http://www.alcohol-injection.com/img/Noozle-Chartdoversb.png" rel="groupe"> <img src="http://www.alcohol-injection.com/img/Noozle-Chartdoversb_small.png" alt="methanol nozzle compare flow chart" /> </a>

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

they seem to make it so hard.

****

override/controllers/front/cmsController.php

*****

 

<?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/thickboxjqzoom.css', 'screen');

Tools::addJS(_PS_JS_DIR_.'jquery/plugins/jqzoom.js');

}

}

}

 

 

 

Then i use in my cms page.

 

<a class="thickbox" href="http://www.alcohol-injection.com/img/Noozle-Chartdoversb.png" rel="groupe"> <img src="http://www.alcohol-injection.com/img/Noozle-Chartdoversb_small.png" alt="methanol nozzle compare flow chart" /> </a>

Good job.

Thanks

Link to comment
Share on other sites

they seem to make it so hard.

****

override/controllers/front/cmsController.php

*****

 

<?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/thickboxjqzoom.css', 'screen');

Tools::addJS(_PS_JS_DIR_.'jquery/plugins/jqzoom.js');

}

}

}

 

 

 

Then i use in my cms page.

 

<a class="thickbox" href="http://www.alcohol-injection.com/img/Noozle-Chartdoversb.png" rel="groupe"> <img src="http://www.alcohol-injection.com/img/Noozle-Chartdoversb_small.png" alt="methanol nozzle compare flow chart" /> </a>

 

 

Hi, thanks a lot for the instruction. Unfortunately I am still struggling with the cms page. I am sorry for being a beginner and asking annoying questions but could you explain me where you put the code exactly and also the picture. The link is my shipping description.

 

Thanks a lot!

Fiesta

Link to comment
Share on other sites

  • 2 months later...
  • 2 weeks later...

For PS1.5.4, please try this,

 

<?php
class CmsController extends CmsControllerCore {
public function setMedia()
{
 parent::setMedia();
 if (count($this->errors))
  return ;
 if ($this->context->getMobileDevice() == false)
 {
  $this->addCSS(_THEME_CSS_DIR_.'product.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'
  ));
 }
 else
 {
  $this->addJqueryPlugin(array('scrollTo', 'serialScroll'));
  $this->addJS(array(
   _THEME_JS_DIR_.'tools.js',
   _THEME_MOBILE_JS_DIR_.'product.js',
   _THEME_MOBILE_JS_DIR_.'jquery.touch-gallery.js'
  ));
 }
 if (Configuration::get('PS_DISPLAY_JQZOOM') == 1)
  $this->addJqueryPlugin('jqzoom');
}
}

Link to comment
Share on other sites

  • 5 months later...
×
×
  • Create New...