Jump to content

Fancybox Lightbox on all pages


Recommended Posts

Hi,

I wanted to have a newsletter signup in the permanent links block that would popup in a modal box.

I searched the forum all day to come up with a solution ( have version 1.4.017) and finally came up with the following after looking at the popup for the Read Terms on the order page. I don't know if it is perfect, but it is working for me. Hope it helps someone else.

Here's what I did:

added the following link in blockpermanentlinks-header.tpl

{l s='signup'}
   [removed]$('a.iframe').fancybox();[removed]



Note: this is not the blocknewsletter signup, but my own custom signup, but the above could be modified for any type of link.


Next, I modified classes/frontController.php by moving the two fancybox lines into the first part of the function

public function setMedia()
   {
       global $cookie;

       Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
       Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
       Tools::addJS(array(_PS_JS_DIR_.'tools.js', _PS_JS_DIR_.'jquery/jquery-1.4.4.min.js',
                        _PS_JS_DIR_.'jquery/jquery.easing.1.3.js',
                       _PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'
                        ));

       if ($cookie->live_edit)
       {
           Tools::addJS(array(
                           _PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js', 
                           _PS_JS_DIR_.'hookLiveEdit.js')
                           );
       }
   }




Then, in product.js, I changed the following to false

$('.thickbox').fancybox({
       'hideOnContentClick': false,
       'transitionIn'    : 'elastic',
       'transitionOut'    : 'elastic'
   });



I also commented out the following lines in the setMedia function for ParentOrderCOntroller.php and ProductController.php

//Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
//_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'



I didn't put the before and after code, but if you look at the code in the setMedia() functions in the files I named, it should be pretty clear.

I think that in blockpermanentlinks I could also set parameters for fancybox, I didn't try it this time, but maybe something like:

[removed]$('a.iframe').fancybox({
       'width' : 550,
       'height' : 400,
       'autoScale' : false,
       'hideOnContentClick' : false});[removed] 

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

Thx, excellent tip.

I´ve tested only the changes in classes/Frontcontroller.php

        
Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');

Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
...



and

        
_PS_JS_DIR_.'jquery/jquery-1.4.4.min.js', 

_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
...



Now the fancybox is loading in index page also !

  • Like 1
Link to comment
Share on other sites

Hi,

I wanted to have a newsletter signup in the permanent links block that would popup in a modal box.

I searched the forum all day to come up with a solution ( have version 1.4.017) and finally came up with the following after looking at the popup for the Read Terms on the order page. I don't know if it is perfect, but it is working for me. Hope it helps someone else.

Here's what I did:

added the following link in blockpermanentlinks-header.tpl
{l s='signup'}
   [removed]$('a.iframe').fancybox();[removed]



Note: this is not the blocknewsletter signup, but my own custom signup, but the above could be modified for any type of link.


Next, I modified classes/frontController.php by moving the two fancybox lines into the first part of the function

public function setMedia()
   {
       global $cookie;

       Tools::addCSS(_THEME_CSS_DIR_.'global.css', 'all');
       Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css');
       Tools::addJS(array(_PS_JS_DIR_.'tools.js', _PS_JS_DIR_.'jquery/jquery-1.4.4.min.js',
                        _PS_JS_DIR_.'jquery/jquery.easing.1.3.js',
                       _PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js'
                        ));

       if ($cookie->live_edit)
       {
           Tools::addJS(array(
                           _PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js', 
                           _PS_JS_DIR_.'hookLiveEdit.js')
                           );
       }
   }




I made these changes too and it works well for a modal popup newsletter subscription box (in my case for mailchimp).

Rather than modifying the core files though, how does one go about implementing these changes to FrontController.php using the overrides/classes folder, to protect it from future prestashop updates?

I tried to make the changes and simply upload the modified file to the override folder, but it still reads the old one in classes/ so for now I've just overwritten the core file which isn't ideal.
Link to comment
Share on other sites

  • 2 months later...

Hi

 

Please tell me why when I click on content the lightbox closing?

 

In jquery.fancybox-1.3.4.js line is:

 

 

$.fn.fancybox.defaults = {

padding : 10,

margin : 40,

opacity : false,

modal : false,

cyclic : false,

scrolling : 'auto', // 'auto', 'yes' or 'no'

 

width : 560,

height : 340,

 

autoScale : true,

autoDimensions : true,

centerOnScroll : false,

 

ajax : {},

swf : { wmode: 'transparent' },

 

hideOnOverlayClick : true,

hideOnContentClick : false,

 

overlayShow : true,

overlayOpacity : 0.7,

overlayColor : '#777',

 

Could you help me?

  • Like 1
Link to comment
Share on other sites

  • 5 months later...
  • 3 months later...

Hi,

after updating my prestashop version to 1.4.8.2, i would like to open a cms page in a fancybox by clicking a link in my module free bloc.

 

can anybody tell me how can i integrate a fancy box in my free bloc in all my site page? and the files to modify.

 

thx

Link to comment
Share on other sites

  • 8 months later...
  • 3 years later...

previous answers contain deprecated code!

 

PrestaShop 1.6

Does not contain versions in file names anymore, CSS and JS of fancybox are at one place,

these addings are always done using controller!

 

There are 2 ways to do it in general:

 

A) Put it in FrontController (override)

To public function setMedia() in your FronController.php (override) put following after $this->addJquery(); :

$this->addCSS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.css');
$this->addJS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.js'); 

B) Put it in your module's header hook

To your module's public function hookHeader() or public function hookDisplayHeader() add following:

$this->context->controller->addCSS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.css');  
$this->context->controller->addJS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.js');

BTW: Basic module generated by PrestaShop Module Generator with no settings contains one of these hooks ready to go :-) 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...