Fancybox Popup for CMS Pages

[ajensen27]

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

[Paulito]

Good Morning,

 

Take a look at this

 

Paul

[ajensen27]

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?

[ajensen27]

BUMP IT UP

[ajensen27]

Can someone, anyone, please help me with getting this fancy box pop-up to work in PS 1.5? I really wan to have one of my CMS pages show in a fancy box pop-up. The link above was no help as it wasn't for 1.5.

 

Thanks!!

[regular777]

You're right, I search it a lot but nothing happens to work.. Some one can help ?

 

EDIT > la réponse dans CE POST !

Edited January 16, 2013 by regular777 (see edit history)

[devilsown]

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>

[hrst]

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

[Fiesta]

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

[jaimeweb]

Hi,

Can anyone help me out trying to get this to work on 1.5.4.

 

Can you let me know what files to edit etc.

 

Thanks

[d(shay_lene)b]

they seem to make it so hard. **** override/controllers/front/cmsController.php *****

Edited April 23, 2013 by d(shay_lene)b (see edit history)

[d(shay_lene)b]

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');
}
}

[sickshot]

Works great with PS 1.5.3.1

 

fastest solution I've seen. all other topics make it to complicated 

 

thank u