prestashop 1.7.0.5 add fancybox in product page

[meyer2005]

Hi,

 

i have added a link in product page

 

<a href="{$link->getCMSLink('8')}?Content_only=1" class="iframe" rel="nofolow">{l s='Shipping Terms'}</a></p>

 

<script  type="text/JavaScript">

$('a.iframe').fancybox({,

'type' :'iframe',

'width': 600,

'height': 600,

});

</script>

 

the popup cannot be loaded. Can somebody guide me!?

Thanks in advance.

Schmid

[vekia]

$() no longer works if you will put this kind of code to page contents

you have to put this to your theme .js file.

[meyer2005]

Thank you for your reply vekia

 

i have added the code

 

$('a.iframe').fancybox({,

 

'type' :'iframe',

 

'width': 600,

 

'height': 600,

 

})

 

in theme/asset/js/theme.js at the end of file. I deleted the Cache. But that does not work.

 

At which line do I have to insert the code !?

 

Thanks in advance

Schmid

[meyer2005]

I need to modify the file /themes/my-theme/templates/_partials/javascript.tpl!?

[meyer2005]

Hello,

 

I Need your help. Can somebody guide me!?

[DARKF3D3]

Did you managed to find a solution?

[NickyPrestashop]

Pour activer fancybox
ouvrir le fichier classes/controller/FrontController.php

Et ajouter $this->addJqueryPlugin('fancybox');

dans la fonction initContent()

Ensuite ouvrir themes/classic/assets/js/custom.js et y ajouter

$(document).ready(function() {   
    $(".ma_classe").fancybox();

});

et pour finir ajouter la classe "ma_classe" à vos éléments sur lesquels vous souhaitez obtenir l'effet

[huymanutd]

On 9/28/2018 at 8:30 PM, NickyPrestashop said:

Pour activer fancybox
ouvrir le fichier classes/controller/FrontController.php

Et ajouter $this->addJqueryPlugin('fancybox');

dans la fonction initContent()

Ensuite ouvrir themes/classic/assets/js/custom.js et y ajouter

$(document).ready(function() {   
    $(".ma_classe").fancybox();

});

et pour finir ajouter la classe "ma_classe" à vos éléments sur lesquels vous souhaitez obtenir l'effet

This works for me (currently v1.7.6.4) . Thank you!

The only thing I would add is to override the core controllers/front/CmsController.php file with override/controllers/front/CmsController.php

The full steps are:

1) Create a new file in override/controllers/front/CmsController.php with the following content:

class CmsController extends CmsControllerCore
{
    public function setMedia()
    {
        parent::setMedia();
        $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox.css', 'screen');
        $this->addJqueryPlugin('fancybox');

    }
}

2) Add the JS call in the custom.js file of the theme e.g themes/classic/assets/js/custom.js

$(document).ready(function() {   
    $(".fancybox").fancybox();
	....
});

3) Add the link to the CMS 's page content
 

<a href="https://<url>/img/cms/IMG_4274.jpg" class="fancybox">
  <img src="https://<url>/img/cms/IMG_4274.jpg" alt="IMG_4274.jpg" width="300" height="225" />
</a>

 

Edited April 26, 2020 by huymanutd
Added format for code (see edit history)

[Kami Solutions]

On 9/28/2018 at 12:30 PM, NickyPrestashop said:

Pour activer fancybox
ouvrir le fichier classes/controller/FrontController.php

Et ajouter $this->addJqueryPlugin('fancybox');

dans la fonction initContent()

Ensuite ouvrir themes/classic/assets/js/custom.js et y ajouter

$(document).ready(function() {   
    $(".ma_classe").fancybox();

});

et pour finir ajouter la classe "ma_classe" à vos éléments sur lesquels vous souhaitez obtenir l'effet

 

You are the best ma friend.

 

For people that don't understand french (me neither) the steps are:

Edit classes/controller/FrontController.php (override doesn't work for 1.7.6) and edit the function initContent()

add - >  $this->addJqueryPlugin('fancybox');

so you'll have something like:

public function initContent()
    {
        $this->addJqueryPlugin('fancybox'); 
        $this->assignGeneralPurposeVariables();
        $this->process();

        if (!isset($this->context->cart)) {
            $this->context->cart = new Cart();
        }

        $this->context->smarty->assign(array(
            'HOOK_HEADER' => Hook::exec('displayHeader'),
        ));
    }

Then go to your template folder and add into custom.js (themes/myTheme/assets/js/custom.js)

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.js
 */
$(document).ready(function() {   
    $(".fancybox").fancybox({
        type: 'iframe',
	    fitToView: true,
	    autoSize: true,
	    height: '50%',
	    width: '100%',
	    openEffect: 'fade',
	    openSpeed: 'slow'
	    });
});

For instance, you can change how iframe behaves and what class to modify, in this case ".fancybox"

 

So all you have to do is include in your HTML  or template code the

<a class="fancybox"> Your code </a>

 

 

[DeProximidad]

It seems easy to be done, but a little help would be essential to make everything work in Prestashop 1.7.6

 

As far as I understood, there are three steps to follow:

 

1. Activate Fancybox jQuery.  This must be done in the "FrontController.PHP" file inside classes/controller/,  adding the line:

$this->addJqueryPlugin('fancybox')

that edits the initContent() function, and it does not work to modify override.

 

2. Add requierd JS function. This will be different for each one, depending on what we want it to do. My doubt is which is excactly the code needed to work for each product gallery?

In any case, this code, whatever it is, should be added to the custom.js file inside assets/js/,  if I am not wrong. Anyone has done this before, and could clarify?

 

3. Change CSS instructions (I guess it must be done in HEAD or HEADER) to add the particular style that is required. An example taken from stackoverflow is this:

<a class="fancybox" href="#page1" rel="gallery"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<div style="display: none"> 
    <a class="fancybox" href="#page2" rel="gallery"></a>
    <a class="fancybox" href="#page3" rel="gallery"></a>

    <div id="page1">page 1 text lorem ipsum</div>
    <div id="page2">page 2 content and more content</div>
    <div id="page3">page 3 text blah, blah, blah</div>
</div>

My question for this step is how to adapt it concretely to the products galleries in Prestashop 1.7..6. Which is the right code to add?

 

I may not have understood anything at all, either.

 

[huymanutd]

On 8/7/2020 at 1:25 AM, DeProximidad said:

It seems easy to be done, but a little help would be essential to make everything work in Prestashop 1.7.6

 

As far as I understood, there are three steps to follow:

 

1. Activate Fancybox jQuery.  This must be done in the "FrontController.PHP" file inside classes/controller/,  adding the line:

$this->addJqueryPlugin('fancybox')

that edits the initContent() function, and it does not work to modify override.

 

2. Add requierd JS function. This will be different for each one, depending on what we want it to do. My doubt is which is excactly the code needed to work for each product gallery?

In any case, this code, whatever it is, should be added to the custom.js file inside assets/js/,  if I am not wrong. Anyone has done this before, and could clarify?

 

3. Change CSS instructions (I guess it must be done in HEAD or HEADER) to add the particular style that is required. An example taken from stackoverflow is this:

<a class="fancybox" href="#page1" rel="gallery"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<div style="display: none"> 
    <a class="fancybox" href="#page2" rel="gallery"></a>
    <a class="fancybox" href="#page3" rel="gallery"></a>

    <div id="page1">page 1 text lorem ipsum</div>
    <div id="page2">page 2 content and more content</div>
    <div id="page3">page 3 text blah, blah, blah</div>
</div>

My question for this step is how to adapt it concretely to the products galleries in Prestashop 1.7..6. Which is the right code to add?

 

I may not have understood anything at all, either.

 

Hey DeProximidad,

I ended up using lightbox as I can't remember what happened to fancybox. It's been a while.

So it's a lot simpler with two steps:

1) Add the code in the attached image to your theme's custom.js file: themes/<yourtheme>/assets/js/custom.js

2) Add the code on the CMS page as follows

<div class="gallery"><a href="https://mooniebridal.com.au/img/cms/makeup/3b.jpg" data-lightbox="gallery"> <img src="https://mooniebridal.com.au/img/cms/makeup/3b.jpg" alt="" width="50%" /> </a></div>
</div>

That's it. The result is here: https://mooniebridal.com.au/content/8-make-up-and-hair-styling

So it does what I need it to do and not on the product page, so I may have confused you entirely. Apology!