Modification of the prestashop zoom function

need4speed · November 28, 2010

Is it possible to change the default zoom function in prestashop so the zoom function works like this one?

http://www.smartgirl.dk/toej/undertoej-badetoej/undertoej/Moerkelilla_Bjoerkvin_hipster_115548_300

razaro · November 28, 2010

I gave a quick try with same effect but not with default jqzoom.
It is different jquery plugin cloud zoom see first and third example.
But it doesn't work good when choosing attribute form drop-down box.

If you want to try I could write instructions and it doesn't need much code change.

need4speed · November 28, 2010

It looks pretty awesome but a really close to the JqZoom you can activate in prestashop.

But I actually love the one you have posted better.

So it it aint going to take to much of your time that could be really nice if you could tell me how to integrate it.

razaro · November 29, 2010

OK here are steps you need to do, but before make backup of files you are changing.

First download latest version of cloud zoom then unpack(unzip) file. You will see two js files and one css file.

Copy cloud-zoom.1.0.2.min.js to your js/jquery folder and open header.tpl in your theme folder.
Add following line next to rest of script calls.

<script type="text/javascript" src="{$content_dir}js/jquery/cloud-zoom.1.0.2.min.js"></script>

Then copy code from cloud-zoom.css to end of your theme global.css.

Next step is to change code in product.tpl also in your theme folder.

Find

        <!-- product img-->
       <div id="image-block">
       {if $have_image}
               <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"/>
       {else}
           <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
       {/if}
       </div>

and replace it with

        <!-- product img-->
       <div id="image-block">
       {if $have_image}
           {if $jqZoomEnabled}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block;">

           <img alt="{$product->name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block;">

           </a>
           {else}
                   <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic"/>
           {/if}
       {else}
           <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
       {/if}
       </div>

Next step is to enable change of big image when thumbnail is clicked (this is different from default - hover).
Change this code

        <div id="thumbs_list">
           <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
               {foreach from=$images item=image name=thumbnails}
               {assign var=imageIds value=`$product->id`-`$image.id_image`}
               <li id="thumbnail_{$image.id_image}">
                   <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
                       <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
                   </a>
               </li>
               {/foreach}
           </ul>
       </div>

to

        {if $jqZoomEnabled}                
       <div id="thumbs_list">
           <ul  id="thumbs_list_frame">
               {foreach from=$images item=image name=thumbnails}
               {assign var=imageIds value=`$product->id`-`$image.id_image`}
               <li id="thumbnail_{$image.id_image}">
                                <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" class="cloud-zoom-gallery" title="{$image.legend|htmlspecialchars}"
                           rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}'">
                       <img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}"/></a>

               </li>                
               {/foreach}
           </ul>
       </div>

       {else}
       <div id="thumbs_list">
           <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
               {foreach from=$images item=image name=thumbnails}
               {assign var=imageIds value=`$product->id`-`$image.id_image`}
               <li id="thumbnail_{$image.id_image}">
                   <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
                       <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
                   </a>
               </li>
               {/foreach}
           </ul>
       </div>
{/if}

That is it.
Almost forgot - you need to enable jqzoom in Back Office >> Preferences >> Products to make this work.

If you have any trouble with code let me know.

clauf · December 3, 2010

Hi Razaro,

After I changed the code of product.tpl,

1. the product picture becomes huge.
2. the 'in the same category' tab moved to above the big product picture.
3. the short product description moved below the product picuture. It was originally to the right of the image ( I downloaded the product.tpl file from one of your last post to make jqzoom work and then my product page becomes out of order).

Can you kindly help to check the code of my product.tpl and see what is wrong? Thanks in advance.

Clauf

{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}



{if $have_image}
{if $jqZoomEnabled}getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block;">

name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block;">

{else}
getImageLink($product->link_rewrite, $cover.id_image, 'wide')}" id="bigpic"/>
{/if}
{else}
name|escape:'htmlall':'UTF-8'}" />
{/if}



{if count($images) > 3}{l s='Previous'}{/if}
{if $jqZoomEnabled}

{foreach from=$images item=image name=thumbnails}
{assign var=imageIds value=`$product->id`-`$image.id_image`}

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" class="cloud-zoom-gallery" title="{$image.legend|htmlspecialchars}"
rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}'">
getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}"/>

{/foreach}

{else}

{foreach from=$images item=image name=thumbnails}
{assign var=imageIds value=`$product->id`-`$image.id_image`}

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />

{/foreach}

{/if}

{if count($images) > 3}{l s='Next'}{/if}

razaro · December 3, 2010

Hi
I copied some of my custom code so it have wide as image size wich is wrong.
I updated previous post but you can just change wide to large in two places.

If you still have some problems sent me PM or post her your website link (or attach product.tpl as zip file )
and I will check it.

lavalava · January 4, 2011

Hi, great job rozaro, thank you !

Can you explain us how to set up this script in other options shown on the Cloud Zoom's site.

Thank you again!

razaro · January 4, 2011

you have to edit rel attribute and use option from cloud zoom website

     {if $jqZoomEnabled}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4" class="cloud-zoom"

This code is in product.tpl, for big image.

lavalava · January 4, 2011

Thank you very mach

rykketid · January 18, 2011

Thanx for help Razaro. I looked for it.

But large picture not change when I choosing color attribute. Just small pictures. I have to click on small picture for zooming.
Can you help to change it?

kpargoiip4 · January 27, 2011

Magic Zoom works OK, easy BO options so the Zoom stays over the original picture.

http://www.magictoolbox.com/magiczoom/modules/prestashop/

..

need4speed · January 27, 2011

So its possible to keep the zoom picture in the same position as the original picture?

Do you have a live example of it?

Timpet · February 21, 2011

Is it posible to make the zoom more powerfull with enlarging the the apearing image?

Timpet · March 3, 2011

this seem to generate a 404 loading problem. It isnt showing on the site, but it shows when debuggen the site with safari debuggen tools.

It must be some Javascript interfearing with it.

When i comment out: getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block;"> it 404 disapearts, but offcouse the zoom allso fails.

hulk · April 5, 2011

thank you for this tip
I want to know the name of the module installed on the site http://www.smartgirl.dk/toej/undertoej/Gul_Pieces_hipster_120942_5
thank you

dambie · May 13, 2011

Any module Cloud zoom to presta 1.4.1 ??

hulk · August 6, 2011

Hello

After researching I found the type of zoom I need here.

I want to integrate it in a module like the sexylightbox or directly in the product.tpl to have the effect fancybox with the zoom but i need some help to do this.

thx

waldemar [pl] · September 5, 2011

razro: How to make modifications to the cloud of zoom - when click on the picture then is opened in a standard lightbox window with a big image.

waldemar [pl] · September 6, 2011

In this case, the script generates a lot of 404 errors because of the presence of cloud-zoom.1.0.2.min.js file references to "."

If someone does not want 404 errors should be changed file cloud-zoom.1.0.2.min.js:

<div class='mousetrap' style='background-image:url(\".\")

to:

<div class='mousetrap' style='background-image:url(\"/img/empty.png\")

and upload a file empty.png to a folder /img.

waldemar [pl] · September 6, 2011

sorry, duplicate post

outlet.ee · September 7, 2011

You will see two js files and one css file.

Copy cloud-zoom.1.0.2.min.js to your js/jquery folder

What is the other file for? Where shall it go?

CrystalPhoenix18 · September 19, 2011

I have tried to install this following the instructions given by Razaro on page 1. I'm using PS 1.4.4.1. All I get is the default jqzoom - not cloud zoom. Can anyone help me? I'd really like a large zoom like the one shown on Cloud Zoom's home page. Should I be updating another file somewhere?

lacoliflor · October 9, 2011

Hello,

I would like to know if anyone have made the integration in PS 1.4.4.1 of Cloud Zoom effect.

See up, CrystalPhoenix question.

And also, I'm interesting to use Fine Zoom effect like Hulk said in his post, because it's a very good and simple zoom style.

And it seems to be very light too:

If anyone know how to use it, I'm very interesting.

Thanks in Advance

La Coliflor

Vilas · December 17, 2011

you have to edit rel attribute and use option from cloud zoom website
	 {if $jqZoomEnabled}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4" class="cloud-zoom"
This code is in product.tpl, for big image.

Hello,

I have made changes to my site as per the instructions. But now while viewing product image though cloud zoom product image gets zoomed but at right hand site still the original small product image appears. Please find image for referance. Can anyone tell me solution on it?? You can check my site to get idea what I means to say.

Thanks

Vilas · January 28, 2012

Hello,

How to insert tint effect of cloud zoom in picture? What modification I have to do?

Please suggest.

Thanks

chetwyn · February 13, 2012

any ideas how to integrate fancy box into cloud zoom ?

Vilas · February 19, 2012

Hi,

Can anyone know how to use TINT effect for cloud zoom?

Please suggest.

Thanks

OK here are steps you need to do, but before make backup of files you are changing.

First download latest version of cloud zoom then unpack(unzip) file. You will see two js files and one css file.

Copy cloud-zoom.1.0.2.min.js to your js/jquery folder and open header.tpl in your theme folder.

Add following line next to rest of script calls.

<script type="text/javascript" src="{$content_dir}js/jquery/cloud-zoom.1.0.2.min.js"></script>

Then copy code from cloud-zoom.css to end of your theme global.css.

Next step is to change code in product.tpl also in your theme folder.

Find

		<!-- product img-->
	<div id="image-block">
	{if $have_image}
			<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"/>
	{else}
		<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
	{/if}
	</div>

and replace it with

		<!-- product img-->
	<div id="image-block">
	{if $have_image}
		{if $jqZoomEnabled}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block;">

		<img alt="{$product->name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block;">

		</a>
		{else}
				<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic"/>
		{/if}
	{else}
		<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
	{/if}
	</div>

Next step is to enable change of big image when thumbnail is clicked (this is different from default - hover).

Change this code

		<div id="thumbs_list">
		<ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
			{foreach from=$images item=image name=thumbnails}
			{assign var=imageIds value=`$product->id`-`$image.id_image`}
			<li id="thumbnail_{$image.id_image}">
				<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
					<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
				</a>
			</li>
			{/foreach}
		</ul>
	</div>

to

		{if $jqZoomEnabled}				
	<div id="thumbs_list">
		<ul  id="thumbs_list_frame">
			{foreach from=$images item=image name=thumbnails}
			{assign var=imageIds value=`$product->id`-`$image.id_image`}
			<li id="thumbnail_{$image.id_image}">
							 <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" class="cloud-zoom-gallery" title="{$image.legend|htmlspecialchars}"
						rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}'">
					<img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}"/></a>

			</li>				
			{/foreach}
		</ul>
	</div>

	{else}
	<div id="thumbs_list">
		<ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
			{foreach from=$images item=image name=thumbnails}
			{assign var=imageIds value=`$product->id`-`$image.id_image`}
			<li id="thumbnail_{$image.id_image}">
				<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
					<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
				</a>
			</li>
			{/foreach}
		</ul>
	</div>
{/if}

That is it.

Almost forgot - you need to enable jqzoom in Back Office >> Preferences >> Products to make this work.

If you have any trouble with code let me know.

kilota · February 24, 2012

Hi,

So nobody can help you with modification to version 1.4.6.2, as the code does not work from the first post.

Thank you.

szyms · April 20, 2012

After adding this code

              {if $jqZoomEnabled}                             
               <div id="thumbs_list">
                       <ul  id="thumbs_list_frame">
                               {foreach from=$images item=image name=thumbnails}
                               {assign var=imageIds value=`$product->id`-`$image.id_image`}
                               <li id="thumbnail_{$image.id_image}">
                                                                <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" class="cloud-zoom-gallery" title="{$image.legend|htmlspecialchars}"
                                                       rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}'">
                                               <img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}"/></a>

                               </li>                           
                               {/foreach}
                       </ul>
               </div>

               {else}
               <div id="thumbs_list">
                       <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
                               {foreach from=$images item=image name=thumbnails}
                               {assign var=imageIds value=`$product->id`-`$image.id_image`}
                               <li id="thumbnail_{$image.id_image}">
                                       <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
                                               <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
                                       </a>
                               </li>
                               {/foreach}
                       </ul>
               </div>
{/if}

i get blank product page. Anybody know how to fix it ?

yusufzulkarnain · July 7, 2012

OK here are steps you need to do, but before make backup of files you are changing.

First download latest version of cloud zoom then unpack(unzip) file. You will see two js files and one css file.

Copy cloud-zoom.1.0.2.min.js to your js/jquery folder and open header.tpl in your theme folder.

Add following line next to rest of script calls.

<script type="text/javascript" src="{$content_dir}js/jquery/cloud-zoom.1.0.2.min.js"></script>

Then copy code from cloud-zoom.css to end of your theme global.css.

Next step is to change code in product.tpl also in your theme folder.

Find

		<!-- product img-->
	<div id="image-block">
	{if $have_image}
			<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"/>
	{else}
		<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
	{/if}
	</div>

and replace it with

		<!-- product img-->
	<div id="image-block">
	{if $have_image}
		{if $jqZoomEnabled}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block;">

		<img alt="{$product->name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block;">

		</a>
		{else}
				<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic"/>
		{/if}
	{else}
		<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
	{/if}
	</div>

Next step is to enable change of big image when thumbnail is clicked (this is different from default - hover).

Change this code

		<div id="thumbs_list">
		<ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
			{foreach from=$images item=image name=thumbnails}
			{assign var=imageIds value=`$product->id`-`$image.id_image`}
			<li id="thumbnail_{$image.id_image}">
				<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
					<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
				</a>
			</li>
			{/foreach}
		</ul>
	</div>

to

		{if $jqZoomEnabled}				
	<div id="thumbs_list">
		<ul  id="thumbs_list_frame">
			{foreach from=$images item=image name=thumbnails}
			{assign var=imageIds value=`$product->id`-`$image.id_image`}
			<li id="thumbnail_{$image.id_image}">
							 <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" class="cloud-zoom-gallery" title="{$image.legend|htmlspecialchars}"
						rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}'">
					<img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}"/></a>

			</li>				
			{/foreach}
		</ul>
	</div>

	{else}
	<div id="thumbs_list">
		<ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
			{foreach from=$images item=image name=thumbnails}
			{assign var=imageIds value=`$product->id`-`$image.id_image`}
			<li id="thumbnail_{$image.id_image}">
				<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
					<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
				</a>
			</li>
			{/foreach}
		</ul>
	</div>
{/if}

That is it.

Almost forgot - you need to enable jqzoom in Back Office >> Preferences >> Products to make this work.

If you have any trouble with code let me know.

Hi Prestashop Addict!

I 've enable jqzoom, and zoom function is allright (600 x 600 pixel) when I rollover the mouse on the left image area, but a pitty! The left image (300 x 300 pixel) is missing, when I click on the missing image, I will find 404 Not Found page (http://bajuditoko.com/img/p/27-68-large.jpg). Do you have any idea to help me? I use prestashop 1.4.1 version and send an attachment of the screenshoot.

Jennym · July 20, 2012

Hello,

I am experiencing the same problem as szyms is facing, but without using this code I can get the default jqzoom effect. Now theres only one problem it will be great if anybody can help me to solve it.

on the product page exactly below the product image we see the small product variations thumbnails and if we move cursor over those thumbnails we see the big image in the product image box but unfortunately this is not happening in this case.

can anybody please help me to solve this problem?

Vilas · October 6, 2012

any ideas how to integrate fancy box into cloud zoom ?

Hi Friend,

Can u tell me how you installed cloud zoom module on your store?

Thanks

nasos · May 1, 2013

I downloaded latest version of cloud zoom and there is only one .js file in the zip file.Can anyone help here ?

Ranno Presta · June 20, 2013

Hello,

After researching I don’t found a free zoom picture module

can anyone help me

thks

Modification of the prestashop zoom function

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

Create an account or sign in to comment

Create an account

Sign in