Fancybox on product page

[Mary26]

Hello,

I try to integrate a Fancybox on my product page to open a CMS link.

My first problem is the slowness of the opening of the page ( about 2 seconds)

My 2nd problem is the opening with IE9 . The Fancybox opens fine but when I close, my page is distorted. The photo of my product has expanded and deformed page !! it does not happen in Firefox .

 

I changed the Product.tpl adding:

 

<script>// <![CDATA[
$('a.iframe').fancybox();
// ]]></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.iframe').fancybox({
        'type' : 'iframe',
        'width':600,
        'height':600
        
    });
});
</script>

<li style="width:"100%"><i class="icon-truck"></i><a class="iframe" href="index.php?id_cms=6&controller=cms&content_only=1">Livraison rapide et suivie</a>

 

</div>

 

 

 

I am under Prestshop 1.6

 

Thank you for your help

 

 

[fred-vinapresta]

Hi,

 

you should embed you cms content in the product page then display it by fancy box.

In you productController.php file, in the initContent function, you can add

$cms = new CMS(6, $this->context->language->id);
$this->context->smarty->assign('cms', $cms);

then in your product.tpl file

<li style="width:"100%"><i class="icon-truck"></i><a href="#product-cms" id="cms-link">Livraison rapide et suivie</a></li>
<div style="display:none;">
<div id="product-cms">
{$cms->content}
</div>
</div>

<script type="text/javascript">
{literal}
$(document).ready(function() {
$('#cms-link').fancybox();
});
{/literal}
</script>

[Mary26]

A big thank you for your reply.
I would never have succeeded without your help.
The Francybox works fine on IE9 and Firefox.

Another question .

The connection is made by
{$ = new CMS cms (6, $ this-> context-> language- > id ) ;

 

and

 

<li style="width:"100%"><i class="icon-truck"></i><a href="#product-cms" id="cms-link">Livraison rapide et suivie</a></li>

This is the link number 6 CMS .
How to add other additional  CMS links?

 

<li style="width:"100%"><i class="icon-credit-card"></i><a href="#product-cms" id="cms-link">Paiement 100% sécurisé</a></li>

 

It's the link number 5 CMS.

And how to adjust the height and width of the Fancybox .

[Mary26]

Hello,
I raise my subject.

I can not set up a second CMS link Fancybox

My first link works perfectly but how parametrer other links ?