Fancybox for CMS Pages - PS 1.5.2

[ajensen27]

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!

Edited October 25, 2012 by ajensen27 (see edit history)

[alexsaiz]

Did you find the solution ajensen27? I have the same issue now. Thanks!

[vekia]

hello

 

you have to attach the fancybox library in the front controller media function, then you will be able to use it on cms pages

[alexsaiz]

Thanks for the reply Vekia. And how do you do that?

[vekia]

open FrontController.php file located in the classes/controller/ directory

 

you've got there setmedia function

 

at the end of this function and right before the

Hook::exec('actionFrontControllerSetMedia', array());

add this code:

$this->addjqueryPlugin('fancybox');
$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'all'); // @TODO

[alexsaiz]

open FrontController.php file located in the classes/controller/ directory

 

you've got there setmedia function

 

at the end of this function and right before the

Hook::exec('actionFrontControllerSetMedia', array());

add this code:

$this->addjqueryPlugin('fancybox');
$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'all'); // @TODO

 

Thanks! I have just followed your directions. I'm trying now to add a link or photo and then select the class "fancy box" but it is still not there. Should I do it like this?

[vekia]

add somewhere:

$(document).ready(function(){
$('.fancybx').fancybox({
 'hideOnContentClick': true,
 'transitionIn' : 'elastic',
 'transitionOut' : 'elastic'
});
});

 

 

then when you're creating links use "fancybx" class

[alexsaiz]

Where do I add this code you have just posted?

[vekia]

in the cms.tpl file

 

don't forget about {literal}{/literal} tags

 

here is the code to paste:

{literal}
$(document).ready(function(){
$('.fancybx').fancybox({
 'hideOnContentClick': true,
 'transitionIn' : 'elastic',
 'transitionOut' : 'elastic'
});
});
{/literal}

[vincentthird]

need help please: how to load product page using fancybox... thank you

[vekia]

thanks for the url i replied there