[MODULE] Thumb Popup

[caparuni]

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

Attached File(s)

•  thumbpopup v0.2.zip (8bytes)
  Number of downloads: 1249

[Ehinarr]

Thanks for sharing your module. Just one question: How do the image disappears (close)?

[caparuni]

when mouse out should be close itself

[jolvil]

THANK YOU !

Works but they are somme problems updating jQuery ( Ajax cart and other problems )

Join request for update:

http://www.prestasho...cker/view/3304/

[caparuni]

yeah ive notice it last night... :(
sure im gonna vote for this

[razaro]

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.

[caparuni]

@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:

[jolvil]

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 !!!

[caparuni]

change it like razaro trick...
already fixed on v0.2

[jolvil]

OK with new file

[razaro]

jolvil

Can you post/PM link to your website to check it out or is it on local server ?

EDIT: OK I see you fixed :-)

[jolvil]

I've just noticed a little problem with another very popular module: MGC Home Carrousel http://www.prestasho...iewthread/10924 . Pictures of this module popup but they should'nt and they do it a bad way.

[caparuni]

@jolvil
url please so i can check it out

[jolvil]

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

[caparuni]

#thumbPopup { z-index:250; }

put this on your global.css

[jolvil]

Quote

#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?

[caparuni]

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

[jolvil]

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?

[caparuni]

maybe on next version

[ysco]

Thanks caparuni for this module.
Will try it out, also thanks to razaro.

ysco..