Jump to content

[MODULE] elevateZoom for Prestashop: zoom and magnifier effects on images


Recommended Posts

  • Replies 282
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Hello everyone,   I noticed that there is a lack of free or open source "zoom" or magnifier effect modules out there, and the JqZoom provided by prestashop seems a bit basic for me, so I mad

Thanks very much Victor for providing us this great and very very useful module.   I tried it with 1.6.0.7 but was facing the same issues, as being faced by other users of 1.6.05 and later versions,

That makes sense. I appreciate your free module. Now I can find the solution. For who met this, change the file /modules/elevatezoom/elevatezoom.tpl: From: $(document).ready(function(){ applyEle

Posted Images

  • 2 weeks later...

This is amazing. However, is there a way to increase the zoom?

 

well, actually it is impossible, but you can do it  :)

 

I mean, really zoom does not exist. You can not enlarge a photo. Zoom in prestashop is an optical effect, it is not a real zoom
 
For example: if your theme large_default image is 300x300
 
If you load an original image of 600x600 pixel you will have a 2x zoom (the large_default picture is half)
if you want the zoom to 3x what you needs that the original photo should be of 900x900,
if you want a 4x zoom then the original photo should be 1200x1200

 

Many peolple do not know that, and load original pictures very small, if the theme use large_default of 300x300 you can not load pictures of 300x300, then there will not be zoom, we see the images of the same size

Edited by moraira (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Nice zoom effect on product.

 

I noticed that css and js are loaded from tpl file.

 

So css and js are not joined and minified if you choose to do it

 

 

To load from php file

 

 

in elevatezoom.tpl remove or comment:

<link rel="stylesheet" type="text/css" href="{$content_dir}modules/elevatezoom/css/styles.css" />
<script type="text/javascript" src="{$content_dir}modules/elevatezoom/js/jquery.elevatezoom.min.js"></script>

in elevatezoom.php add on public function hookHeader line 453

$this->context->controller->addCSS($this->_path.'css/styles.css');

$this->context->controller->addJS($this->_path.'js/jquery.elevatezoom.min.js');
just before
return $this->display(__FILE__, 'elevatezoom.tpl'); 

 

 

  • Like 1

Share this post


Link to post
Share on other sites
  • 1 month later...

Please put URL of your shop here so we can help you.

 

The module jQuery calls are made for the "default" theme and it's child or derivative themes. You will have to change the jQuery calls yourself.

 

I will update the module shortly so everybody can do it via the back office configure page.

 

I have prestashop 1.5.6.1 and autumn how can I make this work. you wrote about this some time back about to change the jquery calls how this be done please help.

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hello.

 

It works fine on PS 1.6.0.14, but when I see in the Mobile is very difficult to use it.

 

Somebody could give me the URL of your store to see if only I have the same problem?

 

Thank you.

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Nobody can help me?

 

Hello lukasz.stanczak,

did you download the right version for PrestaShop 1.6? If so, are you using the default theme or a custom one?

I no longer support this module, sorry. But you could hire somebody around the forums to tweak it for you.

Cheers!

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 2 weeks later...

Hi guys!  :)

About this module working in product list ...

 

I've Prestashop 1.6.0.9 with default theme and my code for the images in product-list.tpl is:

<a class="product_img_link" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" itemprop="image" />

</a>
So in the module configuration, on the adicional code I changed a.product_image img by a.product_img_link img
 
$("a.product_img_link img").elevateZoom({zoomType : "lens", lensShape : "round", lensSize : 200});
 
then I activated the option "adicional code in elevateZoom" (I don't know if it's like that, in spanish is "Activar código adicional de elevateZoom"), then I saved and now it's working:lol:
 
We don't need to add anything in the code manually (like I thought....), just We need to change only this aditional code in the module configuration, activate the option and save.
Edited by sg1_anhell (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

 

Hi vblanch!

 

Thanks for the awesome module! It works nice in desktop! But i have a question. Maybe you can clear it for me. On mobile, when i enter on a product page, if i try to scroll on the "product image", it doesn't move. Is there anyway to disable the module on mobile or maybe solve this issue?

 

Thanks mate! Great work!

Share this post


Link to post
Share on other sites
  • 4 weeks later...
  • 4 weeks later...
  • 5 weeks later...

Your module doesn't work with items with attributes.

For example, if I select item with another attribute, main picture change, but elevateZoom still show previous image.

 

I attached examples (36, 40 attributes. But image the same).

 

Esto es antiguo, pero como nosotros tenemos el mismo problema y lo hemos solucionado, publico la solucion, en elevatezoom.tpl recargamos la funcion restartElevateZoom() varias veces, al hacer click en el color, en las miniaturas, pero no esta al cambiar los otros atributos (los radio button o select) Entonces si cambiamos estos atributos no se nos recarga la imagen del zoom y haremos zoom sobre la anterior.

 

This question is old, but as we have the same problem and have found the solution we publish, in elevatezoom.tpl we reload the function restartElevateZoom() several times: when we click on the color, when we click on the thumbnail, but not wearing that works if we change the other attributes. Then when we change our attributes, does not change the image zoom.

 

Para corregir esto, buscamos este código:

To correct this, we find this code:

		$('#views_block li a').hover(
			function(){
			restartElevateZoom();
			}
                );
 
y al final, justo antes de cerrar la funcion, añadimos esa parte, nos quedaría así:
and right at the end, before closing function, add this:
		$('#views_block li a').hover(
			function(){
			restartElevateZoom();
			}
		);
		
		
		$(document).on('click', '.attribute_radio', function(){
		restartElevateZoom();
		});
		
});
{/if}

IMPORTANTE: si nuestros otros atributos son de tipo select en lugar de radio button sería así:

IMPORTANT: if our attributes are of type "select" we must add is this:
 
                $(document).on('change', '.attribute_select', function(){
	        restartElevateZoom();
                });

y problema resuelto

and problem solved
Edited by moraira (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

I just wanted to start of by saying that this module is awesome and really helps my shop.

 

I just had one small problem that I haven't seen mentioned here before. When looking at a product in quick view, the zoom doesn't work perfectly at first. It seems that the module thinks that the picture is in the top left-hand size of the frame so it zooms in on the wrong part of the product. 

 

It's not a major problem because once you change to another picture, it works perfectly but I was just wondering if there is a fix for this. I have attached a picture. Let me know if this doesn't make sense.  

 

3AWLl.jpg

  • Like 1

Share this post


Link to post
Share on other sites
Hello,

How cool is this addons however has some bugs to fix.

 

Sometimes the zoom is displayed in the upper left of the page, in a wrong way. The same problem was detected on two posts on this forum. What can I do?

 

thank you!problemzoom.jpg

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hi there,

 

This module looks great. I dowloaded the 1.0.3 version for prestashop 1.5.6.1. This module works on the first image only. When I click on the thumbnail It doesn't work. If I move the mouse to the left, i can see the first image zoom . I tried to change the code in "elevatezoom.tpl" file like moraira said in his post (18 january 2016) but nothing happen . I still have the same problem.

 

I let the module activated for the weekend if someone wants to have a look and tell me what's wrong with my shop.

 

http://www.sexyfrisson.com/fr/sextoys-pour-couple/[spam-filter]cleo-sexuel.html

 

I specify that I'm not using the default theme, Jqzoom is not activated in the BO and I'm not a dev.

 

Thanks a lot for your help! ;-)

Share this post


Link to post
Share on other sites

Hi, i really want to use the excelent elevatezoom but prestashop says that this module is not verified. it´s just allowed to install verified moduls from the shop. is ther a way to install it? i really thanks for help!

Share this post


Link to post
Share on other sites

I also have the same problem. If you could solve would be perfect !  HELP!

 

 

I just wanted to start of by saying that this module is awesome and really helps my shop.

 

I just had one small problem that I haven't seen mentioned here before. When looking at a product in quick view, the zoom doesn't work perfectly at first. It seems that the module thinks that the picture is in the top left-hand size of the frame so it zooms in on the wrong part of the product. 

 

It's not a major problem because once you change to another picture, it works perfectly but I was just wondering if there is a fix for this. I have attached a picture. Let me know if this doesn't make sense.  

 

3AWLl.jpg

Share this post


Link to post
Share on other sites
  • 2 weeks later...

hi,

Is someone know how to enlarge more the zoom?

I think the default zoom is good but i need more powerfull size of zoom

in wich file i must go to change it?

 

thanks!

Share this post


Link to post
Share on other sites

Hello

 

     Thank you for the good module, I install in PS 1.6.1.4 and i saw this module working perfact, but when i go to check the speed of my website i got following small issue in elevatezoom module, please see the below

 

Inline small CSS

 

The following external resources have small response bodies. Inlining the response in HTML can reduce blocking of page rendering.

https://meridukkan.com/ should inline the following small resources:

 

So requesting you to kindly resolve this issue if possible 

 

 

Thank you

Hemal Parikh

Share this post


Link to post
Share on other sites

Hi guys, first of all, many thanks to vblanch for this module and to the other people that made improvements.

We have made some interesting updates and fixes  ^_^ . 

Our major updates are focused on PrestaShop modules schema and on performance.

Our version fix the problem of @hdp2101 and @elleux. 

 

A lot of code was rewritten, before installing this, remove the old version to avoid problems. If you have already made some changes to old version of the module compare the changes and if you can move your changes to new module. 

 

We are working on also on backoffice form for PrestaShop 1.6. Stay tuned.

 

Enjoy  ;)

 

Tested on PS 1.6.1.4

prestashop_module_elevatezoom_1.0.5_for_PS16.zip

  • Like 2

Share this post


Link to post
Share on other sites

YEEESSSS

PERFECT!!!!!!!!!!!

BEAUTIFUL!!!

 

THANKSSS

 

Hi guys, first of all, many thanks to vblanch for this module and to the other people that made improvements.

We have made some interesting updates and fixes  ^_^ . 

Our major updates are focused on PrestaShop modules schema and on performance.

Our version fix the problem of @hdp2101 and @elleux. 

 

A lot of code was rewritten, before installing this, remove the old version to avoid problems. If you have already made some changes to old version of the module compare the changes and if you can move your changes to new module. 

 

We are working on also on backoffice form for PrestaShop 1.6. Stay tuned.

 

Enjoy  ;)

 

Tested on PS 1.6.1.4

Share this post


Link to post
Share on other sites

Thanks for the great module. I'm using it for some days and it works great. But i have a question if anyone can help out. I already tried and failed.

 

With this module/zoom, i don't need the "normal" zoom. Anyone knows out can i disable?

 

You can go to the website and see what i mean. www.morh.pt

 

I have this awesome zoom and want to disable the zoom (fancy box i think it's the name) that comes with prestashop. I don't want to use it on mobile either. I just need to disable it for good and just have the elevateZoom.

post-1103515-0-56421100-1457367487_thumb.png

post-1103515-0-44242700-1457367683_thumb.png

Share this post


Link to post
Share on other sites

Hello Tanzo.it

 

      Thank you so much to resolve this issue, and i hope the changes that you done will help to all of us friend while doing SEO

 

Thank you

Hemal Parikh

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 3 weeks later...
  • 4 weeks later...
  • 2 weeks later...
  • 4 weeks later...

Hello to all.

when i try do disable fancy box in product.js what happens is that when the user his the small image it goes out of product page because the image has href is there a way go ignore that ?

 

thanks for the help 

Dani

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 1 month later...

Please Can you help me? I am using PS 1.6.1.0 and zoom is working, everything fine, but if i add extra parameters for example : 

zoomWindowWidth:200, zoomWindowHeight:200,

btw: I am using WINDOW zoom
Nothing changed... Tried cleared cache etc, nothing helped. Can you please solve this problem? Thank you

Edited by Kaper (see edit history)

Share this post


Link to post
Share on other sites

Please Can you help me? I am using PS 1.6.1.0 and zoom is working, everything fine, but if i add extra parameters for example : 

zoomWindowWidth:200, zoomWindowHeight:200,

btw: I am using WINDOW zoom

Nothing changed... Tried cleared cache etc, nothing helped. Can you please solve this problem? Thank you

 

Which version have you downloaded?

Share this post


Link to post
Share on other sites

To improve compatibility and to respect PrestaShop structure guidelines, we decided to split mixed js and smarty code, actually the extra parameters aren't implemented yet, this feature will be included in the next release.

Thanks

Share this post


Link to post
Share on other sites
  • 2 months later...
  • 3 weeks later...
  • 2 weeks later...
  • 3 weeks later...

Hello mate,

 

The module is very cool. I like it.

If I want to use the module on images inside the description of the product how can I do that?

 

ex: I have a code like this in the description:

 

<h4 class="familie">Title</h4>

<a class="thickbox fancybox shown product_img_link accessory_img_link" title="title" rel="gal2" data-fancybox-group="other-views" href="/img/cms/prod/1.jpg">
<img itemprop="image" id="bigpic" title="title" alt="titile" class="img-responsive familieimg" src="/img/cms/prod/1.jpg">
</a>

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Thank you for this great module! I have a question:

 

Can the zoom level be set to a certain degree beyond the default? I do not mean the width and height of the zoom window but the actual level of zoom in the lens, i.e., the action accomplished with the mouse scroll wheel. I would like for the default to be further zoomed in without the user having to scroll in.

 

I see someone posted a similar question not long ago but I didn't spot an answer.

 

Also, how would one zoom in on a mobile device, I tried on iOS and Android but wasn't able to figure it out, hence the need to have the default zoom level at a higher degree.

 

Thanks in advance for your help.

Edited by toustab (see edit history)

Share this post


Link to post
Share on other sites
  • 3 weeks later...
  • 3 weeks later...

Like us if you liked!  :P  :D

 

 

Hi :)

 

Thank you for upgrading to version 1.05! However, I noticed that I cannot yet pass the parameters to help customize the options. Normally I would like to pass the following parameters:

responsive:true,zoomWindowWidth:600, zoomWindowHeight:600,zoomLevel: 0.5,zoomWindowOffetx: 15, borderSize: 2

 

Can you please urgently help by either letting me know which file I can directly edit and by what code.

 

I also read that you will update the module to accept the parameters. Any clue when? ;) Thanks a lot in advance. I use PS 1.6.1.11

 

Also, I noticed position 1 in

Share this post


Link to post
Share on other sites

 

That makes sense. I appreciate your free module. Now I can find the solution. For who met this, change the file /modules/elevatezoom/elevatezoom.tpl:

From:

	$(document).ready(function(){
		applyElevateZoom();

To:

	$(document).ready(function(){
		$(window).load(function(){
			applyElevateZoom();
		});

 

 

That makes sense. I appreciate your free module. Now I can find the solution. For who met this, change the file /modules/elevatezoom/elevatezoom.tpl:

From:

    $(document).ready(function(){

        applyElevateZoom();

To:

    $(document).ready(function(){

        $(window).load(function(){

            applyElevateZoom();

        });

 

 

Hi,

I used this code on default theme and on PS 1.6.1.11 (Latest). On quick view there is an issue when the image is loaded for the first time. There is square box on the upper left corner which has the image and u can scroll on it to obtain zoom as usual. Example of error is below:

 

http://prnt.sc/eoty1y

On using tint we can explore the issue and get this info: (the zoom box appears faded as I used the snip tool and by the time I pressed snip, the zoom window was about to disappear)

http://prnt.sc/eotyzt

 

However, when the second product image is loaded this error is gone and everything works fine. Even when we come back to the first image all is ok. The issue exists only on 1st load.

 

Can you please explain how this issue can be avoided on 1st load? Thanks a ton in advance :

Share this post


Link to post
Share on other sites
  • 5 weeks later...
  • 1 month later...

Hi everyone,

 

I just downloaded and fresh installed this module v1.0.5 on a fresh PS 1.6.1.4 and noticed that the zoomed image displayed in the zoomed window was always the previous image for the variation selected, starting from the 2nd selection. I didn't modify the codes, just changed some settings in the module config page.

 

For example, an item with 3 variations, size - S, M, L; each variation has its own image, image - S, M, L, corresponding to the size value.

 

When the page first loaded, it's like this:

First_loaded.jpg

 

When first select variation S, everything works fine:

1st_selection.jpg

 

Select variation M and move the mouse cursor over to the thickbox, without crossing over the fancybox thumbnail at the bottom, the zoomed image window shows the previous zoomed image:

2nd_selection.jpg

 

Same issue on the 3rd L and 4th S selection:

3rd_selection.jpg

4th_selection.jpg

 

Despite which variation is to be selected next, the zoomed image window will always show the zoomed image of the previous variation.

 

(a sort-of fix: If the cursor crosses over the thumbnail at the bottom, whether it's before or after reaching the thickbox, or refresh the page after each selection, the zoomed image window will show the correct zoomed image. )

 

Does anyone have the same problem? How can I fix it? Any help would be appreciated and thanks a lot in advance.

Share this post


Link to post
Share on other sites
  • 4 months later...
  • 4 weeks later...
  • 1 month later...
  • 1 month later...
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

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