The main reason I’m writing this article is to let you know there is always some way better and simpler to don something, one day I want to add image zoom feature to ASP.NET WebForms GridView that shows list of products with thumbnail, and instead of user click on row to get the product information and see a full picture of the product, I want user to just when hovering on the image a big preview of it appears, I found this jQuery plug-in called elevateZoom I love it because it’s simple, have a lot of feature, and easy to configure.
Now the change is how to add this plug-in to every single image in every row in GridView, I googled but unfortunately I found many of complex solution and I thought these developers intend to make this complex, but no this isn’t that complex, I denied all of them even they are working and I’ll tell you what If done in the end of this article, so let us how to get this done.
First download the plug-in, reference jQuery to your ASP.NET application, second add the GridView control to your form and bind your data, third in the image column bind he thumbnail image to ImageUrl property and add custom attribute data-zoom-image and bind the full image to it.
Here is GridView aspx code:
I’m glad to tell you we’re done, please if you want more configuration check this link but don’t forget like I said before I’ll tell you now what I’ve done.
Developer please think simple, and that all folks, enjoy developing