Jump to content

[module] product image magnify

Marghoob Suleman

By Marghoob Suleman ,
in Free Modules & Themes

 Share Followers 0

Recommended Posts

Marghoob Suleman

Marghoob Suleman 10

Posted
Posted

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
mandrake

mandrake 11

Posted
Posted

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
Tab

Tab 0

Posted
Posted

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
Marghoob Suleman

Marghoob Suleman 10

Posted
Posted
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
samsee

samsee 0

Posted
Posted
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
Marghoob Suleman

Marghoob Suleman 10

Posted
Posted
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
  • 2 weeks later...
Marghoob Suleman

Marghoob Suleman 10

Posted
Posted

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
Star

Star 16

Posted
Posted

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
Jack

Jack 0

Posted
Posted
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
shaqo999

shaqo999 0

Posted
Posted
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
qasrani

qasrani 1

Posted
Posted

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
capclem

capclem 0

Posted
Posted

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
shaqo999

shaqo999 0

Posted
Posted
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
Marghoob Suleman

Marghoob Suleman 10

Posted
Posted

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
Noxyd

Noxyd 1

Posted
Posted

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
Ánh Nga

Ánh Nga 8

Posted
Posted
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
Ánh Nga

Ánh Nga 8

Posted
Posted
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
Noxyd

Noxyd 1

Posted
Posted

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
snowki

snowki 0

Posted
Posted

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
snowki

snowki 0

Posted
Posted
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
Me 8084

Me 8084 2

Posted
Posted

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
  • 1 month later...
  • 2 weeks later...
  • 2 weeks later...
  • 2 weeks later...
  • 2 weeks later...
Alekhine

Alekhine 1

Posted
Posted

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
juanpax

juanpax 0

Posted
Posted

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
  • 2 weeks later...
trusktr

trusktr 1

Posted
Posted

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
  • 1 month later...
  • 2 weeks later...
ukbaz

ukbaz 36

Posted
Posted

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
dagota

dagota 0

Posted
Posted

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
ukbaz

ukbaz 36

Posted
Posted

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
  • 2 weeks later...
  • 5 weeks later...
ShowYou

ShowYou 17

Posted
Posted

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
infoseek

infoseek 3

Posted
Posted

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
Unsought_

Unsought_ 0

Posted
Posted

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
  • 2 months later...
  • 4 weeks later...
pibrom

pibrom 0

Posted
Posted

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
Kentaro Tuason

Kentaro Tuason 0

Posted
Posted

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
  • 3 weeks later...
outlet.ee

outlet.ee 10

Posted
Posted

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
  • 2 weeks later...