Jump to content

Recommended Posts

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

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi galactic,

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

that was modded fancybox script. I replaced comma

}, 

in line 770 with semicolon

};

, and it works fine now.

Share this post


Link to post
Share on other sites
Fanceybox does not work properly, although the image larger, but gives it to the background page. 

I happen to know someone with that advice? 

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More