Fancybox not working on Prestashop´s product page (Pop-up will appear and leave a 404 error)

Hey to all Prestashop developers! I would like some advice about that matter. I downloaded the fancybox feature to implement it into the Prestashop´s product.tpl page. So far, when I enter the product page and click on the zoom magnifier, a pop-up window appears and displays a 404 error URL not found. Here is the code that I needed to put into the product page (product.tpl). Right after the <img> tag I call on the javascript function:

{if $have_image}
                <span id="view_full_size">
                    <a class="fancybox" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'fancybox')}">
                        <img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" 
                        {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" 
                        height="{$largeSize.height}" />
                    <span class="span_link no-print"></span>
                </a>
                <script type="text/javascript">
                $(document).ready(function() {
                $(".fancybox").fancybox();
                    });
                </script>
                </span>
            {else}
                <span id="view_full_size">
                    <img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}"/>
                    <span class="span_link"></span>
                </span>
            {/if}

The scripts and styles are linked to a folder that I named fancybox and are located at the root directory of the theme. I added them at the beginning after this line of code {include file="$tpl_dir./errors.tpl"} {if $errors|@count == 0}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="{$fancybox_dir}/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<link rel="stylesheet" href="{$fancybox_dir}/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

<script type="text/javascript" src="{$fancybox_dir}/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

I have done a lot of research here in Google and in Prestashop's forums but no luck. My version of Prestashop is 1.5.6.2. I would be really grateful if you could help me with any solution on the problem.

Thanks, Orestis

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.