Fancybox in all pages

fancybox-screenshot

Let’s make some changes to use fancybox on every page of our Prestashop store. This first thing we’ll do is download and install the module fancyboxallpages. Then we just have to put the code to display the popup where you want.

For example we will place a link in the direction of our store to display a locator map on googlemaps in module blockcontactinfos.

Locate this code

<li>
<i class="icon-map-marker"></i>{$blockcontactinfos_company|escape:'html':'UTF-8'}{if $blockcontactinfos_address != ''}, {$blockcontactinfos_address|escape:'html':'UTF-8'}</a>{/if}
</li>

And change it to this

<li>
<i class="icon-map-marker"></i>{$blockcontactinfos_company|escape:'html':'UTF-8'}{if $blockcontactinfos_address != ''}, <a class="google_iframe" href="https://maps.google.es/maps?q=,+42+avenue+des+Champs+Elys%C3%A9es+75000+Paris+France&hl=es-419&ie=UTF8&sll=40.345462,-3.826037&sspn=0.009485,0.021136&hnear=42+Avenue+des+Champs-%C3%89lys%C3%A9es,+75008+Paris,+Francia&t=m&z=16&amp;output=embed">{$blockcontactinfos_address|escape:'html':'UTF-8'}</a>{/if}
</li>

At the end of the file will place this code

<script type="text/javascript">
{literal}
    $(document).ready(function() {
        $(".google_iframe").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
	{/literal}
</script>

Download module

Posted on 06/04/2014 in Prestashop

Share the Story

Responses (5)

  1. Hanz
    23/08/2014 at 1:48 pm · Responder

    Hallo,

    thank you for this module, but I have a problem with fancybox in CMS pages. How can I use this modul in CMS, I need to create gallery with fancybox effect.

    Thank you for your reply

    • Antonio Ventura
      Antonio Ventura
      24/08/2014 at 6:42 am · Responder

      You must include the call to the script in the file cms.tpl, so in this way for example

      $(document).ready(function () {
      $(".fancybox5")
      .attr('rel', 'gallery')
      .fancybox({
      openEffect: 'elastic',
      prevEffect: 'fade',
      nextEffect: 'fade'
      });
      });

  2. Hanz
    25/08/2014 at 11:23 am · Responder

    OK I inserted this code to cms.tpl file. I must use attribute rel=”gallery”?

    For example:

    in CMS page?

  3. Hanz
    25/08/2014 at 11:26 am · Responder

    sorry, here is the code:

    a rel="gallery" href="http://www../image1.jpg">

  4. Laura
    24/06/2015 at 12:49 pm · Responder

    Hi.. in cms page the module doesn’t works 🙁 .. I have added the code in cms.tpl in prestashop 1.6 and added rel=”gallery” in the of the image.. Can you help me?
    Tnx so much!!!
    Laura

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Back to Top