Jquery Image Thumbnails Mouseover Effects

July 2, 2012 | By kiranbadi1991 | Filed in: Browser, Development, Environment, Others.

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.

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.

Tags: , , , , ,

Comments are closed here.