Jump to content
Marghoob Suleman

[module] product image magnify

Recommended Posts

Hi Guys,

This is my first module. however i've already uploaded some module updates.

About this module and Features:

This is image enlarger. Visit here http://www.giftlelo.com/cart3/ for live demo.

1. when you rollover on any of product image it will show an enlarge image.
2. Working on all listing page. (best seller, new products, etc)
3. no need have external css, you can control in javascript.
4. you can on/off animation effect by changing value in js (find this line: useAnimation:1,//make it zero if you dont want to animate)
5. you can install and uninstall anytime.
6. its free :)

I've tested with FF and IE 7. Please tell if you find any bug.

How to install:
extract the imagesenlarge.zip file. copy and paste into the modules directory. Go to admin panel click on MODULES tab find a module under 'Utilities' section. click on INSTALL button.

Your feedback please :)

Thanks and Regards,
Marghoob Suleman

----------------------
Date: 19th Jan, 2009

Guys i've updated imagesenlarge. Yes there was a bug.
I've tested it with ff, opera, netscape, and ie7 & 8. It is working fine now.

Please tell if there is any bug. Thank you for using this.

Regards,
MS

------------
25th Jan, 2009

Hello again,
I would suggest to use my imagesenlarge (v1.1) module. v1.1 works with homepagefeatued products too.

Download latest files from here.
http://www.marghoobsuleman.com/node/77

your feedback/bugs are always welcome on my site.


Thank you!


------------
05th Feb, 2009

Hi All,
Imagesenlarge (v1.2) module has arrived.

Download latest files from here.
http://www.marghoobsuleman.com/node/77

your feedback/bugs are always welcome on my site.


Thank you!

3990_y3aLWVuU0UHdnc1lgtKs_t

imagesenlarge.zip

4108_XYeuyQ5qzbxJBy5yoBoj_t

  • Like 2

Share this post


Link to post
Share on other sites

It's great!
But it does not work on my site online :down: with IE7 but work with my firefox 3...
On your site, I looked great!
Where is the problem?

Thank you for your answer!

(IE7)=no (FF3=Yes!)

Share this post


Link to post
Share on other sites

Marghoob,


I really wanted to thank you for doing the work that you have done so far on the Image Script.

I am going to implement this one also.

Thanks
Tsunami

www.biggiesurf.com

Share this post


Link to post
Share on other sites

Good evening Marghoob,

I also note that the links of "Category block" disappear after you install your module. (with IE7, but it's ok on FIREFOX 3)

Thank you for your solution.

Share this post


Link to post
Share on other sites

Hi Ehinarr,

Too bad for IE7,

It is the most important of all to sell in volume ...

I am sure he will find soltion!

Best regards,

Mandrake.

(Very good ehinarr.wordpress.com !)

Share this post


Link to post
Share on other sites

Guys i’ve updated imagesenlarge. Yes there was a bug.
I’ve tested it with ff, opera, netscape, and ie7 & 8. It is working fine now.

Please tell if there is any bug. Thank you for using this.

Regards,
MS

Share this post


Link to post
Share on other sites

Very good module ! so easy to install in 5 minutes

Works fine on my shop ! animation off

great job !

thanks a lot :lol:

Share this post


Link to post
Share on other sites

Hi great module it's work only on your demo web , i tested on 2 sites but doesn't work (IE7.ie8.opera.firefox3) you have an idea.
thinks

Share this post


Link to post
Share on other sites
Hi great module it's work only on your demo web , i tested on 2 sites but doesn't work (IE7.ie8.opera.firefox3) you have an idea.
thinks


Please clear your browser/server cache. and could you give me url where i can see that.

Share this post


Link to post
Share on other sites
there's my site www.instinctbio.fr
thank you


Have you uploaded imagesenlarge folder under modules folder.
If yes. Did you install? did you follow the instruction?

if yes you can pm me your admin user name and password. you can always change your password later.

Share this post


Link to post
Share on other sites

One of the best free module outthere
Thanks man It work ok in v1.0 and 1.1
2 minutes to install.
Looks beautifull, expensive, usefull.


Anyway million 10x

Share this post


Link to post
Share on other sites

Hi Marghoob,

It's great, the module now works with IE7!
Excellent work! Thank you a thousand times, it was a missing vital for my site!
Good day!

Best regards,

Mandrake.

Share this post


Link to post
Share on other sites

yes i uploaded imagesenlarge folder and installed it .
i tested on local and he work great but doesn't work on my distant site.
thinks

Share this post


Link to post
Share on other sites

Thank you for this great job!
Question: The zoom does not work for the products of the home, is it normal?

Share this post


Link to post
Share on other sites
How to install:
extract the imagesenlarge.zip file. copy and paste into the modules directory. Go to admin panel click on MODULES tab find a module under ‘Utilities’ section. click on INSTALL button.


i have follow your instruction until "extract the imagesenlarge.zip file. copy and paste into the modules directory. Go to admin panel click on MODULES tab find a module"

where is ‘Utilities’ section i use PS 1.1 and i can't find the modul on BO and what is the name on BO modules...can you explain more how to install.



regards

Share this post


Link to post
Share on other sites
How to install:
extract the imagesenlarge.zip file. copy and paste into the modules directory. Go to admin panel click on MODULES tab find a module under ‘Utilities’ section. click on INSTALL button.


i have follow your instruction until "extract the imagesenlarge.zip file. copy and paste into the modules directory. Go to admin panel click on MODULES tab find a module"

where is ‘Utilities’ section i use PS 1.1 and i can't find the modul on BO and what is the name on BO modules...can you explain more how to install.



regards


I've attached one more pic in first topic.

Share this post


Link to post
Share on other sites

yeah it's awesome modules..thanks dude for your great job and for quick response....

Share this post


Link to post
Share on other sites

Hi Marghoob,

Downloads modules are not available on your site (404 error)
How to download?
Thank you for your answer,

Kinds regards,

Mandrake.

Share this post


Link to post
Share on other sites

Thanks mandrake,

Thanks for telling me. I was updating my site and all attached files got erased automatically :(

Well, Its available now. Thanks again,

You are such a nice person!

Best Regards,
Marghoob Suleman

Hi Marghoob,

Downloads modules are not available on your site (404 error)
How to download?
Thank you for your answer,

Kinds regards,

Mandrake.

Share this post


Link to post
Share on other sites

Hi Marghoob,

Thank you for your excellent work!

You, you are such a nice person!

Best regards,

Mandrake.

Share this post


Link to post
Share on other sites

Hi Marghoob Suleman,

I know I have told you before. But I want to say it one more time. Your modules are great and thank you again for all of the work. The product image magnify module works great. Thanks.

Share this post


Link to post
Share on other sites
A big thanks to all for the appreciation. feels good :)

Good news...

Images enlarge (v1.2) module has arrived.

Download latest files from here.
http://www.marghoobsuleman.com/node/77

your feedback/bugs are always welcome on my site.

Thank you!


Hi Marghoob Suleman,

Thank you for the great module, I am very appreciated it. I just visited your site, and there are 3 different download links for this module. Do I need to download all of them and installed? Are they different? Do they have different functions for different part of the PrestaShop? Or I only need the imagesenlarge_v1_2.zip 13.41 KB? I have already installed the v1.0 module before and it works. Do I updated this module by add this imagesenlarge_v1_2.zip 13.41 KB on the top of the old one? Or do I need to uninstall the v1.0, and install this v1.2? Thank you very much for all of your help.

Share this post


Link to post
Share on other sites

Hi Marghoob ,

A BIG thank you for your extraordinary work, if I can make you a service to your website, send me a PM.
I am at your disposal,

Best regards,

Mandrake.

Share this post


Link to post
Share on other sites

OMG!

Thanks a lot Mandrake! :)

Hi Marghoob ,

A BIG thank you for your extraordinary work, if I can make you a service to your website, send me a PM.
I am at your disposal,

Best regards,

Mandrake.

Share this post


Link to post
Share on other sites

Ok working with no problem ...
www.asmercan.com



Thanx a lot brother مرغوب سلیمان! ...!

4646_d9OxkR4n2RQfK7bacouw_t

Share this post


Link to post
Share on other sites

Thanks bro... again... how do you guys write in Urdu.

Ok working with no problem ...
www.asmercan.com



Thanx a lot brother مرغوب سلیمان! ...!

Share this post


Link to post
Share on other sites
Thanks bro... again... how do you guys write in Urdu.

Ok working with no problem ...
www.asmercan.com



Thanx a lot brother مرغوب سلیمان! ...!


I can't write :) I just copied from "qasrani"... But I can read Arabic. Couse I'm Muslim (Alhamdulillah)
And I'm Turkish ;)
You know where is TURKEY....? :) Our PM gave a lesson to Shimon Peres a.k.a Baby Killer.
Check This Out : http://www.huliq.com/1/76900/pm-erdoghan-i-will-never-come-davos
Somebody had to do this...
S.A

Share this post


Link to post
Share on other sites

Writing urdu quite easy. If you use windows vista, you just need to enable keyboard and language. If you use XP or linux, let me know. I send you detailed instructions how to install and enable Urdu language and Keyboard settings. Do not get confused with DETAILED INSTRUCTIONS word, it is just few minutes job. I bet you are gonna love it

Share this post


Link to post
Share on other sites

Thank you for this module! A great tool!

I installed the 1.2 version, and I lost the grey frame, how to put back it?

Is it possible to have the Magnifying glass effect in more or on the place of thickbox in the product sheet?

Thank you!

Share this post


Link to post
Share on other sites
Writing urdu quite easy. If you use windows vista, you just need to enable keyboard and language. If you use XP or linux, let me know. I send you detailed instructions how to install and enable Urdu language and Keyboard settings. Do not get confused with DETAILED INSTRUCTIONS word, it is just few minutes job. I bet you are gonna love it


I'm using MAc OsX Bro :)

Share this post


Link to post
Share on other sites

Hey thatz a good idea. and ofcourse you can modify that. open css file from the same folder. replace this

#msBigImageHolder {
   width:300px;
   height:300px;
   overflow:hidden;
   display:none;
   position:absolute;
   background:#ffffff;
   margin-left:4px;
   padding:10px;
}


to this

#msBigImageHolder {
   width:300px;
   height:300px;
   overflow:hidden;
   display:none;
   position:absolute;
   background:#ffffff;
   margin-left:4px;
   padding:10px;
   border:2px solid #c3c3c3;
}



everything is same but border:2px solid #c3c3c3;

Thank you for this module! A great tool!

I installed the 1.2 version, and I lost the grey frame, how to put back it?

Is it possible to have the Magnifying glass effect in more or on the place of thickbox in the product sheet?

Thank you!

Share this post


Link to post
Share on other sites

Hello and thanks a lot for your good job.
I've a little trouble with the "magic zoom", it doesn't works with me :
I only can see a black picture (perhaps the background?).
But the image enlarger works very well (magic zoom off).
If you could find what goes wrong with my magic zoom, it'll be great.

Thank again.

Arnaud

5069_dNBCezcMlJWZm4ufNZOI_t

Share this post


Link to post
Share on other sites
yes i uploaded imagesenlarge folder and installed it .
i tested on local and he work great but doesn't work on my distant site.
thinks

Yes, me too, it not work on my site
www.anhduongmobile.com

Test in localhost it work perfect, but up load to my host it not work again....?

Could somebody know why?

How to resolved it?

Thank!

Share this post


Link to post
Share on other sites
yes i uploaded imagesenlarge folder and installed it .
i tested on local and he work great but doesn't work on my distant site.
thinks

Yes, me too, it not work on my site
www.anhduongmobile.com

Test in localhost it work perfect, but up load to my host it not work again....?

Could somebody know why?

How to resolved it?

Thank!


Hi...hi...

I resolved my problem....

It so easy...

Because this module hook to top, but i removed {hooktop} in my header.tpl and this module not show again...

Modify file imagesenlarge.php let it hook to left or rightcolum --->that it...

Thank again for this great module

Share this post


Link to post
Share on other sites

I've the Problem that the enlarger is not working anymore on featured products on home page.

I I go to categorie it is working again...

see CuoreSportivo-shop

Share this post


Link to post
Share on other sites

I have installed it and it works very well in FF, but in IE 7 & 8 I get extra vertical lines to the right of the image, maybe from the image animation or the black theme background!

5327_VzgCsmLSK63GGbidzpBZ_t

Share this post


Link to post
Share on other sites

Hello and thanks a lot for this module..

No problem..Good working this site www.muhre.com.tr Very nice site..

Share this post


Link to post
Share on other sites

It's working fine but when I use the magic zoom I can't see all the picture...
A part (right and down) of the picture is missing.
How can i do?
Thanks

Share this post


Link to post
Share on other sites

Hello,
I've found the answer to my problem, I had to modify the var ratio to adapt it to my images size :
- open the imagesenlarge.js (in "module/imagesenlarge) with the windows "bloc note"
- find the line "var ratio" under "showClipedimage: function(e)"
- you have to calculate the ratio which fits well to your thickbox size (in preference-> image), for exemple, I modified mine to 2300ppp to have a better resolution, that's why I could only see a little part of my image with the imageenlarger.
this is the calcul :
((your Thickbox size in ppp) / 300 (it's the enlarger windows size)) X 200 (to keep the 1/200e ratio size which fit to the program) = your var ratio
for exemple with my thickbox size (2300ppp):
2300 / 300 = 7.666666666
7.66666666 X 200 = 1533.33333333 (use the scientific calculator of Windows to have 8 numbers after the dot)
1533.33333333 is the perfect ratio for my image size (or resolution)

So, see the picture to see what it does "in fine" with my thickbox size (2300ppp):



I hope it will help some like me which had modify the thickbox size...
Have a good time, and thanks again to Marghoob Suleman for his good job.

Arnaud (France)

PS : excuse me if my English is not very good...

5549_kFjQfNuGvkMv7KFxXZwT_t

Share this post


Link to post
Share on other sites

Hi, I have a question Please,
What is the solution for use the image magnify in all products catégory and for remove the original thickbox ?? thanks you

Share this post


Link to post
Share on other sites
Hi, I have a question Please,
What is the solution for use the image magnify in all products catégory and for remove the original thickbox ?? ( for enlarge in full screen )

Sorry for my english is not the best :))

Thanks you

Share this post


Link to post
Share on other sites

I have the same question as snowki

1- when I use magic zoom I see only a part of the zoomed image only the corner the rest of image is missing

2- how can I use it for full image size instead of the thickbox?

Share this post


Link to post
Share on other sites

I have tried you solution Noxyd but it did not solve my problem unfortunately :(

can any one help please

Share this post


Link to post
Share on other sites

That was very wonderful, Thank you very much!

Share this post


Link to post
Share on other sites

Hi !

How can i put this enlarger module on the product details page only, plz ?

thx

Share this post


Link to post
Share on other sites

Hi,

It doesn't work on Version 1.1.0.5 ??

thanks

Share this post


Link to post
Share on other sites

Hi,

is it possible to add title, reference, details etc. on the image ?

Share this post


Link to post
Share on other sites

Hello

I changed the template of my site, ImageEnlarge did not work any more because the new template uses new images formats ( wide.jpg and widemedium.jpg ).

I found a very simple solution, maybe that can help others users to adapt it for their templates.

Concerned Template (demo): http://www.themesremix.com/17-clean-theme.html



Modifications:

In "imagesenlarge.js"

Original Code:

   setID: function(id, path) {
       var sID = id;
       var sPath = path;
       var imgPath = this.getImagePath(sPath);
       var extract = sPath.split("/");
       var imgName = extract[extract.length-1];
       var largeImg = imgPath+imgName.substr(0, imgName.length-9)+"-large.jpg";
       var thickImg = imgPath+imgName.substr(0, imgName.length-9)+"-thickbox.jpg";
       var homeImg = imgPath+imgName.substr(0, imgName.length-9)+"-home.jpg";
       var smallImg = imgPath+imgName.substr(0, imgName.length-9)+"-small.jpg";        ImagesEnlarge.settings.imageArray[sID] = {small:smallImg, home:homeImg, large:largeImg, thickbox:thickImg};
   },




Modified Code:

   setID: function(id, path) {
       var sID = id;
       var sPath = path;
       var imgPath = this.getImagePath(sPath);
       var extract = sPath.split("/");
       var imgName = extract[extract.length-1];
       var largeImg = imgPath+imgName.substr(0, imgName.length-15)+"-large.jpg";
       var thickImg = imgPath+imgName.substr(0, imgName.length-15)+"-thickbox.jpg";
       var homeImg = imgPath+imgName.substr(0, imgName.length-15)+"-home.jpg";
       var smallImg = imgPath+imgName.substr(0, imgName.length-15)+"-small.jpg";
       var wideImg = imgPath+imgName.substr(0, imgName.length-15)+"-wide.jpg";
       var widemediumImg = imgPath+imgName.substr(0, imgName.length-15)+"-widemedium.jpg";        
       ImagesEnlarge.settings.imageArray[sID] = {small:smallImg, home:homeImg, large:largeImg, thickbox:thickImg, wide:wideImg, widemedium:widemediumImg};
   },






In imagesenlarge.css
Change border colour (blue to green)

#msBigImageHolder {
...
...
...
   border:5px solid #80DD22;
}




Alek.

Share this post


Link to post
Share on other sites

Thx Marghoob, a great work with this addon, it look very very nice, and works perfect under FF3 and IE8, no problems for me, great!!!

just, keep on surprising us!!! ;p

Share this post


Link to post
Share on other sites

Hey Marghoob, can you help explain exactly what is being done below? I can't get my pictures to fit corectly inside the zoom box! My pictures are 638 x 402 (width x height). I have no idea what to do with the numbers!

I'm simply trying to align the pictures like on your site: when you go to one edge on thumbnail, the zoomed picture goes to the same edge, etc.. same with top and bottom.

Thanks Marghoob, this is a Amazing module/plugin!

Hello,
I've found the answer to my problem, I had to modify the var ratio to adapt it to my images size :
- open the imagesenlarge.js (in "module/imagesenlarge) with the windows "bloc note"
- find the line "var ratio" under "showClipedimage: function(e)"
- you have to calculate the ratio which fits well to your thickbox size (in preference-> image), for exemple, I modified mine to 2300ppp to have a better resolution, that's why I could only see a little part of my image with the imageenlarger.
this is the calcul :
((your Thickbox size in ppp) / 300 (it's the enlarger windows size)) X 200 (to keep the 1/200e ratio size which fit to the program) = your var ratio
for exemple with my thickbox size (2300ppp):
2300 / 300 = 7.666666666
7.66666666 X 200 = 1533.33333333 (use the scientific calculator of Windows to have 8 numbers after the dot)
1533.33333333 is the perfect ratio for my image size (or resolution)

So, see the picture to see what it does "in fine" with my thickbox size (2300ppp):



I hope it will help some like me which had modify the thickbox size...
Have a good time, and thanks again to Marghoob Suleman for his good job.

Arnaud (France)

PS : excuse me if my English is not very good...

Share this post


Link to post
Share on other sites

hi all,

this module worked perfectky under PS 1.1
but it doesn't work with Prestashop 1.2 since i did the upgrade
any idea ?

thx

Share this post


Link to post
Share on other sites

Friendly URL problem - Hi this doesn't enlarge images with friendly URL enabled. Works fine without.

Can someone please post code fix on this forum, as I cannot access the German one - even if I do register there.
Thanks
Barry

Share this post


Link to post
Share on other sites

Hello

You need to edit file imagenlarge.js with the following code.

Code:

// Edit: 28.07.2009, HPC http://www.homepage-community.de/index.php?topic=478.0

//var largeImg = imgPath+imgName.substr(0, imgName.length-9)+"-large.jpg";
//var thickImg = imgPath+imgName.substr(0, imgName.length-9)+"-thickbox.jpg";
//var homeImg = imgPath+imgName.substr(0, imgName.length-9)+"-home.jpg";
//var smallImg = imgPath+imgName.substr(0, imgName.length-9)+"-small.jpg";

// it works with and without friendly url
var largeImg = imgPath.replace(/-home/,"-large")+imgName.substr(0, imgName.length-9)+".jpg";
var thickImg = imgPath.replace(/-home/,"-thickbox")+imgName.substr(0, imgName.length-9)+".jpg";
var homeImg = imgPath.replace(/-home/,"-home")+imgName.substr(0, imgName.length-9)+".jpg";
var smallImg = imgPath.replace(/-home/,"-small")+imgName.substr(0, imgName.length-9)+".jpg";

Share this post


Link to post
Share on other sites

Hi Dagota

Thanks for the code update - have edited as you described, but get a javascipt error on the page, and no images magnify
Javascript error is as follows:
"Line 63, Char 3, "imgName' is undefined.

Any idea what is wrong?

Thanks
Barry

Share this post


Link to post
Share on other sites

Hi Dagota.

Works brilliantly!

Just noticed the copy/paste from here altered quotes.

Thanks for all your help.

Barry

Share this post


Link to post
Share on other sites

Thank you Marghoob for this great module!

And also thanks Dagota for the js file fix - I can confirm the same issue with Prestashop 1.2.1 with Friendly URLs turned on

Share this post


Link to post
Share on other sites

i cant make this work on 1.2.2 (even with this js update)

Can anyone confirm?

Share this post


Link to post
Share on other sites
Hi

Could you please try this one.


Thank you so much !!! I had delete the module since I upgrade to the 1.2 and now it works with 1.2.4, thanks again !

Share this post


Link to post
Share on other sites

Hi,
I'm French. Thanks for this module.
I would want to use imageenlarge with all images in my shop (images product, images in other block or carousel..)
Can you help me ?

Share this post


Link to post
Share on other sites

first big thx Marghoob for the great module

I have downloaded your module V1.3,still it won't work in prestashop version 1.2.4,I wonder if you can give a update for the newest version 1.2.4

Share this post


Link to post
Share on other sites

Hi there...

After installing it doesn't appear in my modules...

Maybe this version is only ok for the older versions??

Maybe you have an updated version ??

Kind regards Patrick

EDIT

SORRY it does appear now...

I didn't know i had to upload it manually...

But it doesn't work for me ...

It does enlarge but the category links disappears....

Strange!

12895_i7zhrIYo1vwuhDH4nnZN_t

Share this post


Link to post
Share on other sites

Hi everyone,

I installed this module on several PS Websites. Works well, thanks !

A little clue : If you change the value of the thickbox image, you'll have to modify the imagesenlarge.js, line 137 :

var ratio = 232.5581395;



into a value corresponding to the dimensions of your tickbox images.

Share this post


Link to post
Share on other sites

Hi ! Very great module ! Thanks
But it only works on version 1.3 ... This is normal?

Share this post


Link to post
Share on other sites

Hi Mahood

Awesome plugin! Hey just would like to ask though is the image enlarger plugin workable on the product sheet page? it seems to work with the other pages like on the home page and product category section but doesn't seem to work on the product sheet page where details and specifics is shown. Advice greatly appreciated.

cheers.!

Share this post


Link to post
Share on other sites

Hi im looking to get my images to display in image box like you have on your site, please can you advise?

Thanks
Anthony

Share this post


Link to post
Share on other sites

Does anybody else have this, that if you hover the image which is relatively close to the bottom of browser border, the enlarged image is half way hidden behind the browser border (see the attached image). I would like to have the enlarged image to be centered.

19545_4RBT6ZyIuYQWQh4k0Osn_t

Share this post


Link to post
Share on other sites

hi all,

I'm French and I installed the v1.3 module with the new file imagelarge.js.
The problem that does not work on my site, I have the image that becomes my mouse in the zoom.

Make a test on my website: www.media-discount.fr

Thank you to you

Share this post


Link to post
Share on other sites
hi all,

I'm French and I installed the v1.3 module with the new file imagelarge.js.
The problem that does not work on my site, I have the image that becomes my mouse in the zoom.

Make a test on my website: www.media-discount.fr

Thank you to you


Hello-

Do you have friendly URLs enabled in your site? If so, see this posting:

http://www.prestashop.com/forums/viewthread/10833/P75/#116266

Share this post


Link to post
Share on other sites