Upgrade to the latest JQZoom version 2.3

Kanary · September 27, 2011

Dear experts,

the latest JQZoom now is 2.3 while the one that comes with prestashop is very old.

I've downloaded the latest version files from http://www.mind-projects.it

But how can I update my prestashop to enable the latest Zoom version?

Waiting your expert help.

thanks.

gijomloy · October 1, 2011

The code used in presta seems to be coming from www.professorcloud.com . It seems the version in Presta does not work in IE. I double-checked and the zoom works fine in the examples given on professorcloud.com. I guess I will need to figure out what needs to be updated

gijomloy · October 1, 2011

Hmmm, Presta is actually using the latest version of cloud zoom (1.0.2). I will check tomorrow if it is because I use multuple backgrounds that it does not work on IE. I cross fingers...

gijomloy · October 2, 2011

OK, now that's weird, JqZoom actually works fine on IE, except on a small atom-based netbook we have at home. Even if we use the very same version of IE...

philee · October 3, 2011

Yeah, if someone can write a walk-through how to update the jQZoom from 1.0.2 to 2.3 would be extremely helpful.

gijomloy · October 3, 2011

Those are 2 different plugins (Cloud Zoom 1.0.2 vs JqZoom 2.3).

http://www.professorcloud.com/mainsite/cloud-zoom.htm

philee · October 3, 2011

Wow nice gijonloy. Cloud Zoom looks fantastic. Do you have any of these two implemented?

gijomloy · October 3, 2011

I use CloudZoom 1.0.2. Check http://www.ganda.fr/colliers-tendance/214-escalante-collier-de-perles-flottantes-sur-six-rangs.html for an example. The theme is derived from the theme Jailbreack from Atchworks.

philee · October 3, 2011

Nice! Love the custom circle zoom looks just like a jewelry cut magnifier

gijomloy · October 4, 2011

Thanks Philee. This kind of feedback makes me truly happy. I did that this weekend as a trial. I thought the image would be too big (1600x1600) but I start thinking it is actually OK. Loading times are still reasonable, it seems. This will look even better when I load pictures that are natively in this resolution, right now it was just preprocessed to be enlarged from 800x800.

For those who are interested, for the circle look, I used the CSS border-radius property. For the reflection effect, I superimposed another PNG background image custom made.

philee · October 4, 2011

Yeah, it was very clever. I didn't expect to see the custom circle look.

By any chance do you have a walk-through tutorial on how to change my jQZoom to be CloudZoom?

gijomloy · October 4, 2011

The modification was already done is the theme I purchased actually. I just noticed that the CloudZoom code was located in product.js in the theme directory.

Someday I will have to do something similar with the JQuery webcam plugin (for a virtual mirror app) and will know more. Until then, I am sorry, I cannot really help.

But did you have a look at this?

http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm

heyciao · April 19, 2012

Hi,

when you set in preferences "use jqzoom instead of thickbox", a bool variable is set to 1.

Then, in Controllers/ProductController.php, line almost 50 you find the following:

 if (Configuration::get('PS_DISPLAY_JQZOOM') == 1)
 {
  Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');
  Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
 }

So now it's up to you.

1)you could overwrite the file jquery.jqzoom.js with the new one (2.3 but keeping the old name jquery.jqzoom.js), same for css.

2)you could change those line replacing jquery/jquery.jqzoom.js with jquery/jquery.jqzoom.2.3.js, same for css.

I went into AdminPPreferences.php file in admin-classes dir and I added more options below PS_DISPLAY_JQZOOM:

I added PS_DISPLAY_CLOUDZOOM and PS_DISPLAY_JQZOOM23, just copying the line of PS_DISPLAY_JQZOOM and changing name of variables.

(Then I added in Controllers/ProductController.php, after

 if (Configuration::get('PS_DISPLAY_JQZOOM') == 1)
 {
  Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');
  Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
 }

the following:

 if (Configuration::get('PS_DISPLAY_JQZOOM23') == 1)
 {
  Tools::addCSS(_PS_CSS_DIR_.'jqzoom.2.3.css', 'screen');
  Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
 }

 if (Configuration::get('PS_DISPLAY_CLOUDZOOM') == 1)
 {
  Tools::addCSS(_PS_CSS_DIR_.'cloudzoom.css', 'screen');
  Tools::addJS(_PS_JS_DIR_.'jquery/cloudzoom.jqzoom.js');
 }

I thought it were more elegant, now I can set those in backoffice.

But as you can see, no check beetween them is performed: You should use just one of them, with these modification you can set all of them active and load three js and cs file, so they could conflict.

I'd like to complete this hack with the right code so that I can choose just one of them in backoffice, but I'm far from this.

Hope it helps anyway, you can easily now understand how to change jqzoom versions or adding cloud zoom instead of simply adding a line of code in header.tpl.

Ciao

Another step to add:

in order use conditional

{if $jqZoomEnabled}class="jqzoom"

into product.tpl template, it's necessary to create the variables:

ProductController.php line around 371 you find:

...
   	 'jqZoomEnabled' => Configuration::get('PS_DISPLAY_JQZOOM')
}

Just before the bracket add: (do not forget to add a comma at the end of the existing line)

...
   	 'jqZoom23Enabled' => Configuration::get('PS_DISPLAY_JQZOOM23'),
		'cloudZoomEnabled' => Configuration::get('PS_DISPLAY_CLOUDZOOM')

Final Result:


   	 'jqZoomEnabled' => Configuration::get('PS_DISPLAY_JQZOOM'), //comma!!!
		'jqZoom23Enabled' => Configuration::get('PS_DISPLAY_JQZOOM23'),
		'cloudZoomEnabled' => Configuration::get('PS_DISPLAY_CLOUDZOOM')

Now, in your product.tpl template, you can use jqZoomEnabled if jqzoom, jqZoom23Enabled if evolution version is enabled, cloudZoomEnabled if you want to use cloud zoom, and setting the html class and attributes according to it.

Ciao

chetwyn · April 26, 2012

Did you get it working on 1.4.7 ?

chetwyn · April 27, 2012

bump? Been struggling to get this thing working...

hobo · May 8, 2012

I got this working on 1.4.7.

So now it's up to you.

1)you could overwrite the file jquery.jqzoom.js with the new one (2.3 but keeping the old name jquery.jqzoom.js), same for css.

2)you could change those line replacing jquery/jquery.jqzoom.js with jquery/jquery.jqzoom.2.3.js, same for css.

I went with the (lazy) first option, overwriting jquery.jqzoom.js and jqzoom.css with the latest versions. It looks like the new version only works if the jqzoom class is on a link (<a> tag), so in product.tpl I changed

	   <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}"
		   {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

to

  {if $jqZoomEnabled}
<a href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}" class="jqzoom" title="{$product->name|escape:'htmlall':'UTF-8'}" >
 <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
</a>
  {else}
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
  {/if}

I had to make a corresponding change in product.js, changing

if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
   $('img.jqzoom').jqueryzoom({

to

if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
   $('.jqzoom').jqzoom({

In other words, I removed the "img" qualifier and changed the function name to match the latest release.

chetwyn · May 17, 2012

hmmm... still trying to get this one working. Hey, could you flick me you website so I can check it out?

chetwyn · May 17, 2012

and did you get this working on 1.4.7 ?

chetwyn · May 17, 2012

ive done the changes but it's not working, are you suppose to import jquery 1.6 ? or ?

hobo · May 17, 2012

Sorry - the site's not public yet, so I can't share it. But yes, it's working on 1.4.7, and it's using jQuery 1.4.4 (the version that comes with Prestashop). The only changes I made were the ones I mentioned above:

Replace jquery.jqzoom.js and jqzoom.css with the latest version from http://www.mind-projects.it
Change product.tpl so the image is wrapped in a link
Change the initialization in product.js to remove the "img" and change the function name from "jqueryzoom" to "jqzoom"

chetwyn · May 17, 2012

the master. thanks.

Hey, just one more thing. If I'm hoving then I click the image the image doesn't go large in the fancybox like normal. Any ideas how to fix this one ?

Thankyou for everything!

hobo · May 17, 2012

Sorry, not sure about that. I don't do anything when the image is clicked.

chetwyn · May 20, 2012

anyone got any idea how to do it?

chetwyn · May 26, 2012

bump?

chetwyn · May 27, 2012

anyone?

hobo · May 27, 2012

Looks like you need a couple of additional changes to get the click working. In (the new) jquery.jqzoom.js, change (around line 66)

       $(el).bind('click', function (e) {
		e.preventDefault();
		return false;
	});

to

       $(el).bind('click', function (e) {
		e.preventDefault();
	});

i.e. remove the "return false;".

Secondly, in product.js, change

 //add a link on the span 'view full size' and on the big image
$('span#view_full_size, div#image-block img').click(function(){
  $('#views_block li a.shown').click();
 });

to

 //add a link on the span 'view full size' and on the big image
$('span#view_full_size, div#image-block img, div#image-block .zoomPad .zoomPup').live("click", function(){
  $('#views_block li a.shown').click();
 });

Seems to work on the default theme, so hopefully it'll do what you need.

Edited May 27, 2012 by hobo (see edit history)

chetwyn · May 28, 2012

working. you are the man.! no questions about it. this is totally solved thanks to hobo.

Kanary, please update this to solved.

chetwyn · May 28, 2012

actually, found a bug.... when I hover of the thumbnails, it only now zooms on the first image only ???

chetwyn · May 28, 2012

ok... better explanation.. When the product page loads and I hover of the image it's all good. when I hover over a thumbnail it updates the mail picture (normal functionality) then I go to zoom that new pic it zoom over the first image only. same with every other image... please help !

I actually didn't even realize till ti was live

hobo · May 28, 2012

I hesitate to recommend this, as it has a few things I don't like (mainly a couple of examples of copy and paste code, some from the markup into the javascript, and a dodgy way of disabling the old zoom), but it seems work if you're desperate. It's based on some code on this site.

In project.js, replace the displayImage function with this:

function displayImage(domAAroundImgThumb)
{
   if (domAAroundImgThumb.attr('href'))
   {
    var newSrc = domAAroundImgThumb.attr('href').replace('thickbox','large');
    if ($('#bigpic').attr('src') != newSrc)
    {
	    $('#bigpic').fadeOut('fast', function(){
		    if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled) {
			    var pic_width = $(this).width();
			    var pic_height = $(this).height();
			    $(".jqzoom").unbind();
			    $("#image-block .jqzoom").remove();
			    $('#image-block').append('<a href="'+domAAroundImgThumb.attr('href')+'" class="jqzoom" title="' + domAAroundImgThumb.attr('title') + '" ><img src="' + newSrc + '" id="bigpic" width="' + pic_width + '" height="' + pic_height + '" /></a>');
			    // reload jQZoom after switching image
			    $(".jqzoom").jqzoom({
				    zoomWidth: 250,
				    zoomHeight: 200,
				    title: false
			    });
		    }
		    else {
			    $(this).attr('src', newSrc).show();
		    }
	    });
    }
    $('#views_block li a').removeClass('shown');
    $(domAAroundImgThumb).addClass('shown');
   }
}

Note that if you're using different jqzoom parameters in the $(document).ready() function, you should change these to match. It also assumes you haven't changed the code in product.tpl from what I pasted on the 8th of May.

chetwyn · May 28, 2012

Looks like the zoomWrapperImage class img is not being updated. Can anyone help please ?

chetwyn · May 28, 2012

I'm pretty desperate. it's so much better from a user experience point of view to have these images pre-loaded. I wonder if you could pre-load all of them when the user hit the product page, like the thumbs, the "home" and the "thickbox" all in the background. Man that you be an excellent experience.

Would that be hard to do?

ericktoti · June 22, 2012

Thank you!

hobo...thanx...working for me...prestashop 1.4.6.2

Edited June 22, 2012 by ericktoti (see edit history)

anmbr · June 23, 2012

Amazing fix, good job !!!

But, in my website, image of zoom aren't in a box, her appear in full size:

http://www.alemmarimportadora.com.br/prestashop/product.php?id_product=11

someone can help me ?

Bill Dalton · June 23, 2012

In Back Office > Preferences > Products

Check to make sure you have "Enable JqZoom instead of Thickbox on product page:" set to NO

mim · June 26, 2012

in fact there is an error in product.tpl file for this theme;

find the section image-block and change the first if statement which is:

<!-- product img-->
  <div id="image-block">
  {if $have_image}
 {if $have_image && !$jqZoomEnabled}
<span id="view_full_size">
 <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{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">{l s='View full size'}</span>
</span>
{/if}
  {else}

to

<!-- product img-->
  <div id="image-block">
  {if $have_image}
  {if $have_image && $jqZoomEnabled}[/color]
<span id="view_full_size">
 <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{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">{l s='View full size'}</span>
</span>
{/if}
  {else}

please note that you have just to remove ! sign from line {if $have_image && !$jqZoomEnabled} and that would works!

Edited June 26, 2012 by mim (see edit history)

sandokan71 · July 11, 2012

hello,

I modified my files to use jqzoom 2.3 latest version following the instructions of Hobo's post (Thanks Hobo). It works fine. the only thing is that if I have multiple images the only image that gets the zooming is the first image. When an other image is selected the zoom jumbs to the first or default image.

Anyone knows how to have zooming on the selected images ?

Thanks in advance !

hobo · July 11, 2012

When an other image is selected the zoom jumbs to the first or default image.

Anyone knows how to have zooming on the selected images ?

Have you updated the displayImage() function as I suggested on the 28th of May? If not, give it a try. I still don't like that particular work-around, but it worked for me.

If you've already made the change, I'm not sure where the problem is. Maybe clear your cache to be sure?

sandokan71 · July 11, 2012

Have you updated the displayImage() function as I suggested on the 28th of May? If not, give it a try. I still don't like that particular work-around, but it worked for me.

If you've already made the change, I'm not sure where the problem is. Maybe clear your cache to be sure?

Hey Thanks...No I didn't update before...it works smoothly !

DomsAdmin · July 17, 2012

Good day all!

Hobo-Thanks! For the great instructions for the JQzoom2.3 update. Everything works as described!

One question, Is it possible to disable the fancybox feature and instead changing the bigpicwhen you hover over thumbnails, make the bigpic change when the thumbnails are clicked instead of initializing the fancybox?

Any help and suggestions will be appreciated. You guys have been great!!!

Datise

chetwyn · October 1, 2012

Hey. Does anyone know how to preload all the images? it only seems to pre-load the large image?

rumah-baju.com · October 2, 2012

i get troule to install this jqzoom. Can anyone explain more detail step by step.thx

flora7 · October 31, 2012

Hello,

I have installed the Jqzoom 2.3 in my prestashop theme and with this forum it works. The only problem is with the thumbnails of the productpage. The zoom with the new images from the thumbs are diferent as the principal: The zoomPup has another with and hight, the zoomwrappertitle is with "display:none"...

Here is my product.tpl:

{if $have_image}

{if $jqZoomEnabled}

<a href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}" class="jqzoom" title="{$product->name|escape:'htmlall':'UTF-8'}" >

<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

</a>

{else}

<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}" title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

{/if}

</span>

{else}

<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />

</span>

{/if}

</div>

{if isset($images) && count($images) > 0}

{if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}

{if isset($images)}

{foreach from=$images item=image name=thumbnails}

{assign var=imageIds value="`$product->id`-`$image.id_image`"}

<a href="{$link->getImageLink($product->link_rewrite, $imageIds, thickbox_default)}" onclick="return false" title="{$image.legend|htmlspecialchars}">

<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'small')}" alt="{$image.legend|htmlspecialchars}" height=100px width=75px/>

</a>

</li>

{/foreach}

{/if}

</ul>

</div>

{if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}

</div>

{/if}

{if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;"><img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/> <a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}

</div>

If you see where is the problem... Thanks

KamranMK · November 28, 2012

I got this working on 1.4.7.

I went with the (lazy) first option, overwriting jquery.jqzoom.js and jqzoom.css with the latest versions. It looks like the new version only works if the jqzoom class is on a link (<a> tag), so in product.tpl I changed

	   <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}"
		   {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />

to

  {if $jqZoomEnabled}
<a href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}" class="jqzoom" title="{$product->name|escape:'htmlall':'UTF-8'}" >
 <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
</a>
  {else}
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
  {/if}

I had to make a corresponding change in product.js, changing

if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
   $('img.jqzoom').jqueryzoom({

to

if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
   $('.jqzoom').jqzoom({

In other words, I removed the "img" qualifier and changed the function name to match the latest release.

Hobo everything is great, but for some people this might not work, I had to add _default prefix after large and thickbox names within the the the first piece of code which you have posted within product.tpl

Thanks for help great tutorial

KamranMK · November 28, 2012

Also the small issue i got into, and can't figure out is that the enlarge button which was always under the image now is at the top of the image and I can't bring it down

my programmins skills are very limited, would appreciate if somebody would help me

Aldi M · December 15, 2012

Just an additional tips in updating to the latest jQZoom... You can use the OVERRIDE method which I assume would probably make it friendlier for future Prestashop updates.

Placed here: /override/controllers/front/ProductController.php

Change the content to:

<?php
class ProductController extends ProductControllerCore
{
public function setMedia() {
 parent::setMedia();

 /* Update jQZoom plugin */

 if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {

  // Remove the call to load the older files
  $val = _PS_JS_DIR_.'jquery/plugins/jqzoom/jquery.jqzoom.js';
  $array = $this->js_files;
  $key = array_search($val, $array);
  if($key !== false) {
unset ($this->js_files[$key]);
  }
  unset ($this->css_files[_PS_JS_DIR_.'jquery/plugins/jqzoom/jquery.jqzoom.css']);

  // Add the newer files
  $this->addCSS(_THEME_CSS_DIR_.'jquery/jquery.jqzoom.css');
  $this->addJS(_THEME_JS_DIR_.'jquery.jqzoom-core.js');
 }
}
}

So what this does is it removes the call for the older version of jQZoom, and add the newer version which you place in your theme in the following folders:

/your-theme/js/jquery.jqzoom-core.js

/your-theme/css/jquery/jquery.jqzoom.css

/your-theme/css/images/zoomloader.gif

Then make the necessary adjustments to the other related files/codes as advised by @hobo.

Ray UK · December 17, 2013

Thanks for this guide, updated to jqzoom 2.4 on PS 1.5.4.1 and works fine, except for a couple of little things.

When initially loading a product page, all the thumbnails are shown, and not just the one(s) for the default combination

see here: http://www.no-match.co.uk/ecig-kits/294-vegas-mini-solo-electronic-cigarette-kit.html

If you choose a colour(even the default), then only the images for that colour are shown (which is correct)

Also, when clicking any thumb, instead of loading in jquery popup/modal, it just loads the image in place of the current product page

Also, the thumbnail carousel doesn't work. It has 3 rows of images instead of just the 1 scrolling list.

Any help is appreciated

Ray

Edited December 17, 2013 by MerseyRay (see edit history)

Ray UK · December 18, 2013

UPDATE: I think that all the images showing is probably correct ?

Its just that they are showing on multiple lines, instead of like a carousel

Any ideas guys

Also, since updating the jquery.jqzoom.js, the shopping cart doesn't expand on hover when viewing a product.
It still works on other pages so im assuming this has something to do with the updated jquery.jqzoom.js file ?

Any ideas on that one

Cheers

Ray

January 30, 2014

Hey guys,

I have tried the method shown before by @hobo and combined it with @Aldi M to try to make it upgrade proof.

I made the changes to product controller override.

Then I did the product.tpl changes.

Then I did the product.js changes from:

//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('thickbox', 'large'));
$('img.jqzoom').jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
}

to..

//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('thickbox', 'large'));
$('.jqzoom').jqzoom({
zoomType: 'innerzoom'
});
}

Any ideas why this isn't working?

I get the error in my JS file (consolidated through Prestashop)

Uncaught TypeError: Object [object Object] has no method 'jqzoom'.

Thanks in advance for any help you can offer!

Edited January 30, 2014 by Guest (see edit history)

January 30, 2014

Update. I found out that the JS wasn't being loaded..

I use 1.5.x..

Is this code that Ali gave still valid? It was from 2009.

<?php
class ProductController extends ProductControllerCore
{
public function setMedia() {
parent::setMedia();

/* Update jQZoom plugin */

if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {

// Remove the call to load the older files
$val = _PS_JS_DIR_.'jquery/plugins/jqzoom/jquery.jqzoom.js';
$array = $this->js_files;
$key = array_search($val, $array);
if($key !== false) {
    unset ($this->js_files[$key]);
}
unset ($this->css_files[_PS_JS_DIR_.'jquery/plugins/jqzoom/jquery.jqzoom.css']);

// Add the newer files
$this->addCSS(_THEME_CSS_DIR_.'jquery/jquery.jqzoom.css');
$this->addJS(_THEME_JS_DIR_.'jquery.jqzoom-core.js');
}
}
}

Inner zoom works once I load it with header tpl..

Edited January 30, 2014 by Guest (see edit history)

babyewok · June 18, 2014

I am using PS 1.5.6 and have updated the displayimage function as per this thread to resolve the issue of the innerzoom image not being updated when a different thumbnail is selected.

However since updating that function I keep getting an ugly flash of an image placeholder before the new image loads (on the first hover of a thumbnail - it doesn't happen on subsequent hovers as the image is chached). What can I do to prevent this? It doesn't happen when using the original function (although of course the jqZoom image is not updated).

Upgrade to the latest JQZoom version 2.3

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment