Jquery image click event

Jquery image click event

Jquery image click event. You might be showing thumbnail or compressed version of an image on website. You want to display original size of image once user click on thumbnail. You can also zoom the image to new size or original size.

First you need to attach click event to an image and change source to get full image content.

Assuming you are showing thumbnails of images on webpage based on ID of image. The Html source may look like below one.

<img id="1024" src="Thumbnails/imageHandler.ashx?id=1024" />

To display full image you need to change the source of an image as src=”/FullimageHandler.ashx?id=1024”. In your case the image handler path might be different. An idea is to change the source of an image at runtime using Jquery.

Jquery Script change source of an image.

$("img").click( function(){
        
           var id = $(this).attr("id");
           
            $(this).attr("src", "/FullimageHandler.ashx?id="+id );
      
        });

Here we are passing an id of an clicked image to get full image content via http image handler. You may need image handler to handle image request. Image handler will find the image by Id from database or from file server. It will render the image as a response to request.

Complete Source code.

 <title>Jquery</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript" language="javascript">
    
    $(document).ready( function (){ 
    
        $("img").click( function(){
        
           var id = $(this).attr("id");
           
            $(this).attr("src", "/FullimageHandler.ashx?id="+id );
      
        });
                        
     });
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
         
        <img id="1024" src="Thumbnails/imageHandler?id=1024" alt="Product image" />
         
    </form>
</body>

Tags:

asp net image uploadAsp.net Convert String To ImageAsp.net Convert Image To Base64How To Hide Div On Click Using JQueryJquery button click eventHow to check image is loaded using JQueryJQuery SlideJQuery how to change background imageBasics of jqueryLearning JqueryJQuery Hyperlink Click

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.