Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Michael Mangelschots
2732
Hover on image
posted

Dear,

I'm using the grid to display products, (image, name , brand,.....) the image is shown using a template ("<img   class='supersmallImage' src='${I}") + "'>"))

And this works just fine. However , I want to enlarge the image on hover.

I tried, http://stackoverflow.com/questions/11769212/enlarging-images-when-mouseover-using-jquery , but I think the grid is somehow stopping the hover event on the image.

Is there a way to do what I want.

 

Kind regards

Parents
No Data
Reply
  • 20255
    Offline posted

    Hello Michael,

    Thank you for contacting us.

    In order to investigate this issue I have created a sample for you, although everything works as expected. Could you please take a look and let me know if I am missing something from your scenario.

    Image and video hosting by TinyPic

    Code snippet:

    1. <script>
    2.         $(function () {
    3.             $("img[id*='_image']").mouseenter(function () {
    4.                 $(this).css("cursor", "pointer");
    5.                 $(this).animate({ width: "35px", height: "35px" }, 'slow');
    6.             });
    7.  
    8.             $("img[id*='_image']").mouseleave(function () {
    9.                 $(this).animate({ width: "25px", height: "25px" }, 'slow');
    10.             });
    11.         });
    12.     </script>

    ..............

    1. <ig:TemplateDataField Key="ImageFromDir" VisibleIndex="4">
    2.                         <Header Text="ImageFromDir">
    3.                         </Header>
    4.                         <ItemTemplate>
    5.                             <img id="image" runat="server" src='<%# Eval("ImageFromDir") %>' />
    6.                         </ItemTemplate>
    7.                     </ig:TemplateDataField>
    EnlargeImageOnMouseHover.zip
Children