Jump to content

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


Recommended Posts

Hi there, the module should work for 1.5.x if you follow instructions. However take into account that the new images have to be loaded (when you change image) so it takes a while. In slow connections the old image is still seen, and then it suddenly changes. It's the way the plugin works right now.

 

Take also into account that it was not developed for 1.6. It should work with the right tweaks though. It shouldn't be too difficult.

 

And please take into account that this is a free module, so I can't fix/give support for any particular configuration or versions.

 

Cheers

hi, i understand.

 

i have changed server recently before that it works fine. but partial function not working on new server. i can send you a link if you want to take a look, i am sure its not because of new images or slow connection though.

Share this post


Link to post
Share on other sites
  • 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

hi, i understand.

 

i have changed server recently before that it works fine. but partial function not working on new server. i can send you a link if you want to take a look, i am sure its not because of new images or slow connection though.

Do you use tint option? When I disabled it it work fine for me.

Share this post


Link to post
Share on other sites

Do you use tint option? When I disabled it it work fine for me.

hi, yea i use tint option, i saw your previous post about tint option. it still didn't work after i diable it.

Share this post


Link to post
Share on other sites

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, like image not zooming, etc issues. After some couple of hours of fiddling with the js code, finally i have managed to make it work on latest versions.

 

And now it works perfectly well, atleast on my site. I am using default theme.

 

For those who are having trouble with the 1.6.0.5 or later versions of prestashop, please install this corrected module

 

prestashop_module_elevatezoom_1.0.3.zip

 

BTW, can someone please explain me how to attach files here???

Edited by birenmehta (see edit history)
  • Like 3

Share this post


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

If someone would be so kind to fix those variables for 1.6, so it does not display same imiage twice... I've tried to do this by myself, but I don't know JavaScript and failed miserably. 

 

birenmehta version got other image, but it does not work as is should :( It's blurry and you can't navigate through the whole picture.

Share this post


Link to post
Share on other sites

Hey birenmehta

 

Yeah you toggled it to use "thickbox" image size which is good. However the image is blurred in the zoom window

 

 

If someone would be so kind to fix those variables for 1.6, so it does not display same imiage twice... I've tried to do this by myself, but I don't know JavaScript and failed miserably. 

 

birenmehta version got other image, but it does not work as is should :( It's blurry and you can't navigate through the whole picture.

 

All Issues Resolved......

 

prestashop_module_elevatezoom_1.0.4.zip

Edited by birenmehta (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

All Issues Resolved......

 

attachicon.gifprestashop_module_elevatezoom_1.0.4.zip

 

Now zooming works as intended, amazing job birenmehta, really appriciate your work on this.

 

Are you considering making some more changes? Only thing that annoys me about this module is how lens disappears - when you are on the edge of the picture, you need to move coursor out of the lens, not out of the picture.

Share this post


Link to post
Share on other sites

Now zooming works as intended, amazing job birenmehta, really appriciate your work on this.

 

Are you considering making some more changes? Only thing that annoys me about this module is how lens disappears - when you are on the edge of the picture, you need to move coursor out of the lens, not out of the picture.

 

Thanks rybaczewa.

 

Here, check this out... 

 

prestashop_module_elevatezoom_1.0.4.zip

  • Like 1

Share this post


Link to post
Share on other sites

Forgot to mention... 

before trying out this module please clear your  cache in web Admin panel  ADVANCED PARAMETERS > PERFORMANCE and also your BROWSER'S CACHE.

I have cleared the cache (browser as well as system) and re-installed the updated module, still the zoom (lens) is not working in 1.6.06... uou may check at 14cp.com

Share this post


Link to post
Share on other sites

Congrats for your module, is amazing!!.

 

I have one small problem; aldought I tried to mod thumbnail pics, the only thing Prestashop does when adding pixel size is add white space around the image, so the picture is not bigger.

 

I'd like to know if there is a way to have a bigger picture once you apply the magnifier.

 

Thanks again for such a piece of app. :)

 

Regards.

 

My website is www.TicTacArea.com

Share this post


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

Hola uso presta 1.6 y no funciono puedes ayudarme tal vez configure mal

 

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 made my own and I'm putting it here.

 

The purpose of this plugin is to be able to add a magnifier or zoom efect to the product images in the product page (please see attached pics). There's also an extra field where you can put jQuery code to execute the elevateZoom plugin on other images, like product list images, etc. An example of this is provided inside the module.

 

It's based on the elevateZoom jQuery plugin by Andrew Eades (it's free software also). I have addapted and patched it to work with Prestashop, and then minified it to improve loading speed.

 

The module is completely free and is released under the GPL2 license.
 
This module is now compatible with 1.4.x and 1.6.x. Not tested with 1.3.x but may work.

The module is multilingual. If it's not translated to your language you can the language file here and I'll add it to the module.
 
Thank you!

Installation and use :

1. Put the "elevatezoom" folder into "modules" folder in your Prestashop installation.
2. Enable the module in Modules (Back Office): search for it, then install and activate.
3. In Modules, click the "Configure" button on the elevateZoom for Prestashop module.
4. Set the settings for your product page or product list/other zooms and press "Save".

5. Look at your product page and amaze B)

 

Please feel free to submit patches or translations in this thread so I can add them to the module and credit you accordingly.

 

Version history:

1.0.0 Initial release of the module (only works with 1.5.x)

1.0.1 Now also compatible with Prestashop 1.4.x !

1.0.2 Fixed Google Chrome visualization bug.

1.0.3 Added support for Prestashop 1.6.x due to popular demand.

Share this post


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

Hi, just want to ask if it is possible to disable the pop up view in mobile when you click the image of the product?

and how to do it and where can see the code,

 

Hi there Mochi09, to disable that popup (known as "Fancybox") you must go to: /themes/{yourtheme}/js/products.js and comment the fancybox jquery call: $(‘.thickbox’).fancybox ... (that's for PS 1.5, I guess it's the same for 1.6). You owe me some japanese mochi now! :P

 

For more details, I'm not sure if allowed to post a link but I made a little guide in my blog about how to disable fancybox. In case links are not allowed please pardon me moderators :) .

 

 

Thanks rybaczewa.

 

Here, check this out... 

 

attachicon.gifprestashop_module_elevatezoom_1.0.4.zip

 

Thanks a lot for fixing it for 1.6 birenmehta, I'm not a jQuery genius myself and any help is appreciated. Is this version still compatible with 1.5? May I merge the code in github?

Share this post


Link to post
Share on other sites

Hi there Mochi09, to disable that popup (known as "Fancybox") you must go to: /themes/{yourtheme}/js/products.js and comment the fancybox jquery call: $(‘.thickbox’).fancybox ... (that's for PS 1.5, I guess it's the same for 1.6). You owe me some japanese mochi now! :P

 

For more details, I'm not sure if allowed to post a link but I made a little guide in my blog about how to disable fancybox. In case links are not allowed please pardon me moderators :) .

 

 

 

Thanks a lot for fixing it for 1.6 birenmehta, I'm not a jQuery genius myself and any help is appreciated. Is this version still compatible with 1.5? May I merge the code in github?

ok gonna try that one, thanks!  ;)

Share this post


Link to post
Share on other sites

tried it ,but I just want to disbable the fancy box in mobile view, is that possible?

 

Try something like:

 

 

var windowSize = $(window).width();

 

if (windowSize <= 720) {

    $(‘.thickbox’).fancybox...

}

 

 

You may have to adjust the size (720 in this example) according to your mobile theme configuration.

Share this post


Link to post
Share on other sites

at product.js?

 

i put it like this , is that right?

$('.thickbox').fancybox({
'hideOnContentClick': true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
                var windowSize = $(window).width();
                if (windowSize <= 720) {
 $(‘.thickbox’).fancybox...
});
Edited by Mochi09 (see edit history)

Share this post


Link to post
Share on other sites

 

at product.js?

 

i put it like this , is that right?

$('.thickbox').fancybox({
'hideOnContentClick': true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
                var windowSize = $(window).width();
                if (windowSize <= 720) {
 $(‘.thickbox’).fancybox...
});

 

More like:

 

 

var windowSize = $(window).width();

if (windowSize <= 720) {

    $('.thickbox').fancybox({

        'hideOnContentClick': true,

        'transitionIn' : 'elastic',

        'transitionOut' : 'elastic'

    });

}

Share this post


Link to post
Share on other sites
	$('.thickbox').fancybox({
		'hideOnContentClick': true,
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic'
	});

        var windowSize = $(window).width();
        if (windowSize <= 720) {
        $('.thickbox').fancybox({
                'hideOnContentClick': true,
                'transitionIn' : 'elastic',
                'transitionOut' : 'elastic'
       });
      }	
});

like this? sorry, im not good in coding, :(

Share this post


Link to post
Share on other sites
	$('.thickbox').fancybox({
		'hideOnContentClick': true,
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic'
	});

        var windowSize = $(window).width();
        if (windowSize <= 720) {
        $('.thickbox').fancybox({
                'hideOnContentClick': true,
                'transitionIn' : 'elastic',
                'transitionOut' : 'elastic'
       });
      }	
});

like this? sorry, im not good in coding, :(

 

Replace

 

 

    $('.thickbox').fancybox({

        'hideOnContentClick': true,

        'transitionIn'    : 'elastic',

        'transitionOut'    : 'elastic'

    });

 

For this:

 

 

var windowSize = $(window).width();

if (windowSize <= 720) {

    $('.thickbox').fancybox({

        'hideOnContentClick': true,

        'transitionIn' : 'elastic',

        'transitionOut' : 'elastic'

    });

}

 

 

Keep in mind that you may have to change the 720 for another number of pixels depending on your theme.

 

*Edit: missing '}'.

Edited by vblanch (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

tried but,the fancy box also removed in web view, i already changed the number of pixels to 300

 

Strange. You may need to debug your mobile view. Put this code after var windowSize:

 

 

alert("window size = " + windowSize);

 

This way you will be able to see the size of your window. If no pupup appears, you might have some error in your code, or you are modifying something else. What's your website?

Edited by vblanch (see edit history)

Share this post


Link to post
Share on other sites

This way you will be able to see the size of your window. If no pupup appears, you might have some error in your code, or you are modifying something else. What's your website?

heres one of the product in the website

Share this post


Link to post
Share on other sites

I see your mobile version is activated under 753 pixels, that's the number you should put there, and it should work.

It works now! thanks for your help man! ;) you're awesome!

Share this post


Link to post
Share on other sites

Hello, thank you very much for this awesome module, works great on my PS 1.5.4.1.

 

I have a question about the easing option " Set if easing is used or not. ".

 

What is this option for please ? i don't see any difference activated or not.

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 3 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).

 

post-826528-0-72429100-1411058912_thumb.png

post-826528-0-48155700-1411058913_thumb.png

Share this post


Link to post
Share on other sites

Hello,

 

First of all, thank you for this great module !

Well, I've downloaded the version 1.04 for my PS 1.6.05. So, it seems that when the type of zoom is on "lens" or "window", you can scroll with mousewheel so that the image is zoomed in or zoomed out as much as you want. But when, the type of zoom is on "inner", the zoom effect is totally similar to the default PS jqzoom and you cannot scroll with mousewheel. Can you confirm if it's the normal behaviour ?

 

Thanks

Share this post


Link to post
Share on other sites

looks fantastic!

can i add it to the free modules list? it's a pinned topic in free modules section

your module will be morevisible then,

just let me know if you agree

 

Thanks for this fantastic module. However I am able to magnify the images on the product page but I want this to be enabled everywhere like on the home page, category page and product list too. Is it possible? Help would be greatly appreciated.

Share this post


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

Hello can i set that your module get an original image ? (e.g 211.jpg - not 211-thickbox_default.jpg) because prestashop resize my original image to smaller size but for zoom purpose is better to use a original picture. thx

 

SuXCBiX.png

Share this post


Link to post
Share on other sites

Hi,

 

 How to make the elevate zoom 1.0.4 module as  responsive? I add "responsive:true" in additional code for elevate zoom, but it not works.

 

 

Hello can i set that your module get an original image ? (e.g 211.jpg - not 211-thickbox_default.jpg) because prestashop resize my original image to smaller size but for zoom purpose is better to use a original picture. thx

 

SuXCBiX.png

I think we have the same problem, sorry if not (I'm not an expert).

 

My problem is that:

I use PrestaShop 1.6.0.9, the module works well but if I open a product page, and then I rezise the browser it caused error like this:

foq8gi.jpg

 

Please help me to solve this problem :(

It is as if the module did not notice that have changed the size of the photo.

Share this post


Link to post
Share on other sites

I didnt trying magnifier after resizing byt i try now and after i resize browser to small and than to fullscreen it make a similar problem 

 

xidlfCo.png

 

but i have other problem - prestashop make a "thickbox" size of picture when you enlarge it... but when I upload a 2000x1500px picture I enlarge it only to this thickbox size (800x800px) maybe is OK for enlarging but not for magnifier (there I want use an original picture in original size)

Share this post


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

Just one more big thank you for your sharing !

Helped me out of the box. Nice configuration options, and gives all the benefits of jQuery elevateZoom without the need of manual integration. If your theme code is clean, it should work in the minute.

Share this post


Link to post
Share on other sites

Hello

There is quite a lot of questions how to implement this module to product list but no answers.

Is there someone who could help?

Thank you

 

Hello AdrianPa,

there's an example in the module itself.

However it only would work in themes based on the "default" theme.

Best regards.

Just one more big thank you for your sharing !

Helped me out of the box. Nice configuration options, and gives all the benefits of jQuery elevateZoom without the need of manual integration. If your theme code is clean, it should work in the minute.

 

You are welcome, please support my work if you like it ;)

great module, great work, thank you for sharing it  :)

 

You are welcome :)

I think we have the same problem, sorry if not (I'm not an expert).

 

My problem is that:

I use PrestaShop 1.6.0.9, the module works well but if I open a product page, and then I rezise the browser it caused error like this:

foq8gi.jpg

 

Please help me to solve this problem :(

It is as if the module did not notice that have changed the size of the photo.

 

It seems that the magnifier div is not big enough?

Try debugging that, it's strange. It works on the default theme.

Best regards.

Share this post


Link to post
Share on other sites

This module is perfect! Thank you.

Could you please advice where I can change thickness of the picture's border?

 

Check the CSS of the module and/or your theme, you should be able to alter that buddy :)

Share this post


Link to post
Share on other sites

First of all, thanks for this mod which seems to be great!

 

But... I'm not able to install it on my PS :(

 

I uploaded the module (trying both through FTP in the modules folder and through the form on the module section), but once I search for it in Modules on the BackOffice.... i cannot find it :(

 

Any hints?

 

Thanks in advance!

 

P.s. prestashop version: 1.6.0.5

Edited by Ashen (see edit history)

Share this post


Link to post
Share on other sites

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).

 

Have anybody found a solution to this issue?

 

Thanks

Share this post


Link to post
Share on other sites
I have found the fault.

if I translate the module in the back office then the whole text away.

 

if I delete the file de.php in themes \ default-bootstrap \ modules \ elevatezoom \ translations \ is the English labeling back

 

that is not only in module, elevetzoom, is also in other module for example, paypal.

 

I think there is a problem, in the new prestashop version 1.6.0.11

 

I leave the module in the English language and everything works fine:-)

 

regards

miba

Share this post


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

Please help, I am newbie..Expert advise needed.

 

Not able to install above module. I am using Prestashop cloud.

 

This module cannot be installed
This module could not be verified by PrestaShop.

This generally happens when the module isn't distributed through our official marketplace, PrestaShop Addons - or when your server failed to communicate with PrestaShop Addons.

logo.png
Module elevateZoom for Prestashop Author Victor Blanch
Edited by Abhishekbafna (see edit history)

Share this post


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

Hi, this is amazing module a like it... but after little time just stop working and I can't figure it out, why... Please somebody to help me? LoreznoCapo.com is at now under maintenance. Please contact me and I will grant access. (slacik.jan@gmail.com)

 

I tried install, uninstall clear cache etc but i dont know why it stop work nowhere...

 

I think, you can solve this in a moment.

 

Thank you very much!!!

Edited by ONYX4407 (see edit history)

Share this post


Link to post
Share on other sites

Can you please help me to lessen the border size of Elevate Zoom, i mean reduce the border size to 1 px from the pop up of elevate zoom.

 

Please check the CSS of the module and if that doesn't work check the elevateZoom code to change the parameter that controls that.

Share this post


Link to post
Share on other sites

Hi, this is amazing module a like it... but after little time just stop working and I can't figure it out, why... Please somebody to help me? LoreznoCapo.com is at now under maintenance. Please contact me and I will grant access. (slacik.jan@gmail.com)

 

I tried install, uninstall clear cache etc but i dont know why it stop work nowhere...

 

I think, you can solve this in a moment.

 

Thank you very much!!!

 

Hello, since your site is on maintenance there's not much to fix :S Anyway, disable the module and check if the site works OK then. If so, it's a problem with your theme. This module was made for 1.5.x and the default theme in mind.

 

Thanks!

Share this post


Link to post
Share on other sites

Hi vblanch,

 

First I'd like to thanks for your module. It's helpful for me because I can zoom the image in Quick View. However, I met a strange issue. At the first time I'm in Quick View, I can only zoom the product image within a small zoom area, width = 258px. Then I quick view this product again, zoom works properly.

10e1urt.jpg

My site: http://aduabu.com/en/12-t-shirts-o-neck

I think the reason is it gets the size of element #BigPic before the Quick View completely loads. 

How can I fix this issue?

 

Thanks.

Share this post


Link to post
Share on other sites

Hi vblanch,

 

First I'd like to thanks for your module. It's helpful for me because I can zoom the image in Quick View. However, I met a strange issue. At the first time I'm in Quick View, I can only zoom the product image within a small zoom area, width = 258px. Then I quick view this product again, zoom works properly.

10e1urt.jpg

My site: http://aduabu.com/en/12-t-shirts-o-neck

I think the reason is it gets the size of element #BigPic before the Quick View completely loads. 

How can I fix this issue?

 

Thanks.

i have this same issue!

Share this post


Link to post
Share on other sites

i have this same issue!

 

Hello,

the module was intended to be used inside the "product page" of your theme, in PrestaShop 1.5.

You are using it inside the "quick view" of PrestaShop 1.6 if I'm correct.

It's very very likely that it will fail because of that. The page structure is different and the module won't work well.

Unfortunately I can't work on this for free anymore, so please feel free to submit any updates to improve the module's compatibility.

If I ever get enough support to go on updating my free modules, I will.

Thanks a lot.

  • Like 1

Share this post


Link to post
Share on other sites

Hello,

the module was intended to be used inside the "product page" of your theme, in PrestaShop 1.5.

You are using it inside the "quick view" of PrestaShop 1.6 if I'm correct.

It's very very likely that it will fail because of that. The page structure is different and the module won't work well.

Unfortunately I can't work on this for free anymore, so please feel free to submit any updates to improve the module's compatibility.

If I ever get enough support to go on updating my free modules, I will.

Thanks a lot.

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();
		});
  • Like 2

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();
		});

Quantan it worked! thank you! i have another issue and it will make this module perfect! when i use a png image with transparent background when and zoom in you can see the background picture. When i use regular jqzoom this is not an issue, the background comes white. can you help with this? thanks! 24ymgpl.jpg

Share this post


Link to post
Share on other sites

Quantan it worked! thank you! i have another issue and it will make this module perfect! when i use a png image with transparent background when and zoom in you can see the background picture. When i use regular jqzoom this is not an issue, the background comes white. can you help with this? thanks! 24ymgpl.jpg

Link, please. I'm not sure I can help but I'll try.

Share this post


Link to post
Share on other sites