Jquery Image Thumbnails Mouseover Effects

2 Jul

Enlarging the Image based on the mouse over/Hover event is something which lot of retail websites use quite often and its one of key VOW  features of the site.Basically the way it works is that there exists a large container which contains all images and one large image is displayed followed by 6 to 7 thumbnail images.Once we mouse over those thumbnail images, they get zoomed to fit in the large image container.

This link will give you the basic implementation which I had done recently.Also we can  can use this code with dynamic images which gets pulled from the file drive.Just replace the a href and image src with your image path and they should work for you.To get the code, Just do view source from the  browser tool bar and you have all the code for you to use.

Please note that there is some light box code in the demo code.For the lack of time, I am not able to fix that part in the hosting server.But if you include the proper path to the light box javascript file in your code, it should work as light box gallery as well.You will need both lightbox.js and lightbox.css for light box gallery to work.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: