Jump to content

[MODULE] Thumb Popup


Recommended Posts

This module has been reported to the PrestaShop security: it has not been updated for a long time and contains some security issues. For this reason, the zip file has been removed and this disclaimer has been added. The topic will stay available for archival purpose.

 

after awhile without posting a module, now im back with new module and of course its free to you all

well this module is another image enlarger, so when user mouse over the thumb image then the larger image will come in the popup. the popup itself will take position relative to your mouse pointer / screen size.
enjoy and see a live demo at chenoel.com. special credit to razaro for helping me out

note: now its worked with jQuery 1.2.6 (ps default), no need to update your jQuery

WARNING:
this module is a thankyouware so say thank you is a must and send some donation is a hope

 

  • Like 6

Share this post


Link to post
Share on other sites

I changed this code in thumbpopup.js from

        //Attach hover events that manage the popup
       $(this)
       .hover(setPopup)
       .mousemove(updatePopupPosition)
       .mouseleave(hidePopup);



to

        //Attach hover events that manage the popup
       $(this)
       .hover(setPopup,hidePopup)
       .mousemove(updatePopupPosition);



And now it is working with Prestashop jQuery 1.2.6 .
Also it is hiding image correctly and doesn't report any js error for me.

  • Like 1

Share this post


Link to post
Share on other sites

@razaro
well, again thank you from the bottom of my heart... people razaro is one of the best js programer ive ever know, he always clean-up my mess :kiss:

Share this post


Link to post
Share on other sites

strange I don't have exactly the same code

        //Attach hover events that manage the popup
       $(this)
       .hover(setPopup)
       .mousemove(updatePopupPosition)
       .mouseout(hidePopup);




Modify the code is OK but the Popup doesn't close when mouse out !!!

Share this post


Link to post
Share on other sites

OK, change in thumbpopup.js

popupCSS: {'border': '1px solid #000000', 'background': '#FFFFFF'},

to

popupCSS: {'border': '1px solid #000000', 'background': '#FFFFFF', 'z-index': '999'},

is a bit better but should be better with no pop up on it

Share this post


Link to post
Share on other sites
#thumbPopup { z-index:250; }

put this on your global.css


It works but the not better than css in thumbpopup.js wich is more usefull because don't need to change global.css when install the module.



I prefer to not have a pop up with a similar image in size on MGC Home Carrousel module, how to not have the popup on these pictures when thumb popup is runing?

Share this post


Link to post
Share on other sites

the problem is carousel and featured product using same class (.product_image)
so to made popup didnt shown on carousel is simple just rename the class name on the tpl file

take a look on thumbpopup.tpl

$('a.product_image img, a.product_img_link img').thumbPopup({



this line handle wich container is gonna popup when mouse-over

Share this post


Link to post
Share on other sites

OK thanks, I just removed one.

I think it could be interesting to set up in admin wich class or classes are going to be used for this module. What do you think about?

Share this post


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

go edit thumbpopup.tpl, you will found something like this

$(window).load(function(){
   $('a.product_image img, a.product_img_link img').thumbPopup({
       imgSmallFlag: '-home',
       imgLargeFlag: '-large'
   });
});



-home & -large is images size based on Back Office >> Preferences >> Image
so if if you want to change it to other size the just change the name, ex: -thickbox

Share this post


Link to post
Share on other sites
go edit thumbpopup.tpl, you will found something like this

$(window).load(function(){
   $('a.product_image img, a.product_img_link img').thumbPopup({
       imgSmallFlag: '-home',
       imgLargeFlag: '-large'
   });
});



-home & -large is images size based on Back Office >> Preferences >> Image
so if if you want to change it to other size the just change the name, ex: -thickbox



Thank you.I understand but it does not work for me :(

Anyway, most important is that when the thumbnail is close to the top then the popup simply flows out of the window. I think it should not be like that, instead it should always be inside the browser window?

Please could you have a look at this page? : http://www.pinklilylingerie.com/new-products.php

many thanks
Bob

Share this post


Link to post
Share on other sites

well you still using -large as a popup.... and i think is to big.....
the solustions is simple... make it smaller from Back Office >> Preferences >> Image then regenerathe the image.
please remember not all people using big screen/monitor :-)

Share this post


Link to post
Share on other sites
well you still using -large as a popup.... and i think is to big.....
the solustions is simple... make it smaller from Back Office >> Preferences >> Image then regenerathe the image.
please remember not all people using big screen/monitor :-)


Thanks but I do not seem to have any control over the size of the image. It is popping up now and it is smaller but unfortunately it is just too small now. It does not make any difference whatever I set up in the Back Office.

Share this post


Link to post
Share on other sites

you can always control the size of the image on Back Office >> Preferences >> Image
so if you decide to made and use new 'popupsize' image the just make it larger!!!

Share this post


Link to post
Share on other sites

Yes, that is exactly what I did. But still it does not work :( I have even regenerated thumbnails but the popup remains the same size. What is imgSmallFlag and imgLargeFlag exactly?

27285_uxphkKTcquWSaEvXD4mz_t

Share this post


Link to post
Share on other sites

this is your thumbpopup.tpl content.....

$(window).load(function(){
   $('a.product_image img, a.product_img_link img').thumbPopup({
       imgSmallFlag: '-popup_home',
       imgLargeFlag: '-popupsize'
   });
});



now im re-attach your image... and hope you will see the answer

27337_wBJs9lohw1TZeo5z4Wv9_t

Share this post


Link to post
Share on other sites

I understand you.

But you don't understand the problem: you can see that popupsize is set to 350x350 in admin. But the picture that is popping up now is actually much smaller. (Ithink it is the same size as the thumbnail). Whatever size I set, it will not get bigger :(


this is your thumbpopup.tpl content.....

$(window).load(function(){
   $('a.product_image img, a.product_img_link img').thumbPopup({
       imgSmallFlag: '-popup_home',
       imgLargeFlag: '-popupsize'
   });
});



now im re-attach your image... and hope you will see the answer

Share this post


Link to post
Share on other sites

Thanks. I got it now. I changed it to the correct spelling, regenerated the images and....

It is still small size :( I don't believe...

I probably have not mentioned that I am not an expert...

OMG... did u realy see the attachment????
please see it first!!!

27339_HLeyRd1RVvd29q1GEk58_t

Share this post


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

Very very happy with the module, just what i was looking for. But as I'm using the filter search module its not zooming, is there any way I can get it to work with the filter search module?

Cheers
Andy

Share this post


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

Really nice module ! Thanks a lot !

But i have a weird thing with the akila 2link slideshow (akila 2link slideshow), see the attachment, the popup appears behind the slider :/
Is there a way to fix that or should i change the popup size or use an another slider ?

Other thing, how do you change the popup position ?

Thanks !

Regards,

YDT

34341_MvNBC0nvofFVBpYC84gi_t

Share this post


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

Could someone please please help me with image sizing. I've installed the thumbpopup module and it looks great. Thanks! My problem is that the image that the thumbpopup enlarges looks to small. Is there any way I can get this image bigger - please see link to page where image is to small.

 

http://www.ontheballtshirts.co.uk/category.php?id_category=19

 

Thanks

Ally (newbie)

Share this post


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

Hi, does this module the same as imageenlarger from here

www.marghoobsuleman.com ?

I am asking just to be sure I don't mess anything.

Regards,

Share this post


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

go edit thumbpopup.tpl, you will found something like this

 

$(window).load(function(){    $('a.product_image img, a.product_img_link img').thumbPopup({        imgSmallFlag: '-home',        imgLargeFlag: '-large'    });});

-home & -large is images size based on Back Office >> Preferences >> Image

so if if you want to change it to other size the just change the name, ex: -thickbox

 

THANKS ya gan,salam dari Jogja, Indonesia :D

Share this post


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