TypeError: $(...).jqzoom is not a function

[Guido Buldrighini]

Hi,
I've found an error on TB. If I check jqZoom instead of Fancybox in the product page.
This is the error console.
Has it already happened to someone?
does anyone have a solution? (TB 1.0.8)

Edited July 11, 2019 by Guido Buldrighini

[Jonny]

It's seem that the product.js is from PrestaShop1.6, TB doesn't not use jqzoom.

[musicmaster]

Is this is the only javascript error? This type of errors often happens as a follow-up error after some prior error has caused problems loading jquery.

[Guido Buldrighini]

4 hours ago, Jonny said:

It's seem that the product.js is from PrestaShop1.6, TB doesn't not use jqzoom.

Thank you very much Jonny, you were right, now I've got the default template product.js but I get this error.
P.S. musicmaster is the only js error:

[Guido Buldrighini]

Hi, in the end I found the solution, in the product.tpl file (coming from a prestashop template) I have this:

{if $have_image}
					<span id="view_full_size">
						{if $jqZoomEnabled && $have_image && !$content_only}
							<a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html':'UTF-8'}">
								<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/>
							</a>
						{else}
							<img id="bigpic" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/>
							{if !$content_only}
								<span class="span_link no-print">{l s='View larger'}</span>
							{/if}
						{/if}
					</span>
				{else}
					<span id="view_full_size">
						<img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/>
						{if !$content_only}
							<span class="span_link">
								{l s='View larger'}
							</span>
						{/if}
					</span>
				{/if}

Instead of this:

{if $have_image}
            <a class="fancybox"
                  data-fancybox-group="product"
                  id="view_full_size"
                  href="1"
                  onclick="return false;"
            >
              <noscript>
                <img class="img-responsive center-block"
                     itemprop="image"
                     src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'}"
                     title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"
                     alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"
                     width="{$largeDefaultWidth|intval}"
                     height="{$largeDefaultHeight|intval}"
                >
              </noscript>
              <picture id="bigpic">
                <!--[if IE 9]><video style="display: none;"><![endif]-->
                {if !empty($webp)}
                  <source class="img-responsive center-block"
                       itemprop="image"
                       srcset="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'}"
                       title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"
                       type="image/webp"
                  >
                {/if}
                <!--[if IE 9]></video><![endif]-->
                <img class="img-responsive center-block"
                     itemprop="image"
                     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
                     srcset="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'}"
                     title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"
                     alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"
                     width="{$largeDefaultWidth|intval}"
                     height="{$largeDefaultHeight|intval}"
                >
              </picture>
              {if !$jqZoomEnabled && !$content_only}
                <span class="span_link" title="{l s='Zoom in'}">
                    <i class="icon icon-search-plus"></i>
                  </span>
              {/if}
            </a>
          {else}
            <span id="view_full_size">
              <noscript>
                <img class="img-responsive center-block"
                     itemprop="image"
                     src="{$img_prod_dir|escape:'html':'UTF-8'}{$lang_iso|escape:'html':'UTF-8'}-default-large_default.jpg"
                     title="{$product->name|escape:'html':'UTF-8'}"
                     width="{$largeDefaultWidth|intval}"
                     height="{$largeDefaultHeight|intval}"
                >
              </noscript>
              <picture id="bigpic">
                <!--[if IE 9]><video style="display: none;"><![endif]-->
                {if (!empty($webp))}
                  <source class="img-responsive center-block"
                          itemprop="image"
                          srcset="{$img_prod_dir|escape:'html':'UTF-8'}{$lang_iso|escape:'html':'UTF-8'}-default-large_default.webp"
                          title="{$product->name|escape:'html':'UTF-8'}"
                          type="image/webp"
                  >
                {/if}
                <!--[if IE 9]></video><![endif]-->
                <img class="img-responsive center-block"
                     itemprop="image"
                     src="{$img_prod_dir|escape:'html':'UTF-8'}{$lang_iso|escape:'html':'UTF-8'}-default-large_default.jpg"
                     srcset="{$img_prod_dir|escape:'html':'UTF-8'}{$lang_iso|escape:'html':'UTF-8'}-default-large_default.jpg"
                     title="{$product->name|escape:'html':'UTF-8'}"
                     width="{$largeDefaultWidth|intval}"
                     height="{$largeDefaultHeight|intval}"
                >
              </picture>
            </span>
          {/if}

 

[Acer]

Hi

I'm having a similar problem in 30Bz 1.1.0, though for me it was working in 1.08. Also, note that JqZoom has been part of TB since earlier versions and the toggle to enable JqZoom is still available in version 1.1.0.
I've created a new thread for this issue

 

[Acer]

Ok, so this should be fixed in a future update. In the meantime, the "how to fix now" is detailed in this thread:
And yes, in case you're wondering: JqZoom is available in ThirtyBees, and does work (just a 'bug' caused it to not work)

 

Edited September 11, 2019 by Theo