Fancybox problem

[web4infinity]

I have a problem on the product's page. It seems that the Javascript is not working.

 

I can see this when I click on the thumbnail image; no larger image is showing (e.g. fancybox).

When I click on More details nothing happens.

 

This is happening on all website. Here's a page: http://www.okzam.co.uk/window-regulator-kits-clips/10-audi-a4-electric-window-regulator-repair-front-left.html

 

Thanks

[sebkos]

Hi,

 

you've got js error in shopping.js. Please use console or firebug to find it.

[web4infinity]

I'm using firebug but I don't see the error. What is it, or where can I find it exactly?

 

Thx

[sebkos]

select console in firebug (first tab) and refresh site. I tried to block shopping.js and everything worked perfectly.

[galactic]

I have the similar problem, the only difference is when I click on small image, big image just opened in new window. Fresh Prestashop 1.4.6.2 install, default template, untouched. Fancybox just not working.

http://is.gd/WxSZCL

[web4infinity]

select console in firebug (first tab) and refresh site. I tried to block shopping.js and everything worked perfectly.

 

You are right. The problem is with the eBay script which gets the live feedback. I'll see a workaround.

 

Thanks

[sebkos]

Hi galactic,

 

you've got changes in jquery.fancybox-1.3.4.js. There are commented out lines of code and missing ; character

[galactic]

where is missing ; character?

[sebkos]

before $.fn.fancybox = function(options) in jquery.fancybox-1.3.4.js (line 787)

[galactic]

that was modded fancybox script. I replaced comma

}, 

in line 770 with semicolon

};

, and it works fine now.

[galactic]

I reinstalled Prestashop, but fancybox not working, can no find what's wrong:

http://is.gd/WbDM9s

[ms99]

Fanceybox does not work properly, although the image larger, but gives it to the background page. 

I happen to know someone with that advice? 

[Josefmartos]

Hi, I had that problem and I just solved it (maybe it can work for you also):

 

The file you have to modify is "./themes/theme481/products.tpl"

 

From line 143 you will find this:

 

<div id="pb-right-column">
        <!-- product img-->
<!-- product img-->
<script>
    /*$(function(){
        $('#zoom1').parent().on('click',function(){
         var perehod = $(this).attr("perehod");
         if (perehod=="false") {
            return true;
         }else{
            return false;
         }
        });
    });*/
    $(document).ready(function() {
        $("a#zoom1").fancybox();
    });

...

 

The lines in red catchs the event when we click on the image (that is a link in fact), and I have no idea what they pretend to do, but for sure them make the fancybox does not work. So just comment them.

You have to add the lines in green. Them adds the image on the link to the fancybox system, so when we click on it, it will make the effect. Your link with the big image to show has to have the ID zoom1 (in this example, you can change it).

I decided to not use the jqzoom, and just show the image and having the big one by clicking on it, so some lines down under in the same file I did the following:

 

{if $jqZoomEnabled}
<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block; width:106px!important; height:106px!important;">

<img alt="{$product->name|escape:'htmlall':'UTF-8'}" width="106" height="106"  title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block ; z-index:2; opacity:0; width:106px!important; height:106px!important;">

<img alt="{$product->name|escape:'htmlall':'UTF-8'}"  id="bigpic" class="picpic" width="300" height="300" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block; margin-top:0px; margin-left:0; top:-270px; left:-186px; position:absolute; z-index:1">

</a>
{else}
<a id="zoom1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}">
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic" />
</a>
{/if}

 

You have to add the link (lines in green) in order to make it work with the fancybox. As you can see I used the same ID #zoom1.

If you are using jqzoom it may work without modifications because it already have the link.

 

Hope this can help.

Regards.

[Sansara Evans]

Thanks Josef

That really helped me on my site: http://bit.ly/2o5z3Ro

It was the second line:

<img alt="{$product->name|escape:'htmlall':'UTF-8'}" width="106" height="106"  title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block ; z-index:2; opacity:0; width:106px!important; height:106px!important;">

that I'd messed up.

I like your solution. Very eloquent!