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>
                <script type="text/javascript">
                $(document).ready(function() {
                <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>

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=""></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 I would be really grateful if you could help me with any solution on the problem.

Thanks, Orestis



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.