I want to save the image when you click on the same as provided in below example.
http://www.thrombosisadviser.com/en/resources/image-library/index.php
After clicking on small image an popup will appear with a download button, by pressing on the download button the image will be downloaded and ready for saving.
I want to do the same thing in JavaScript/jQuery only. Please help & suggest.
It is not possible to download and save the image with javascript alone you also need to use server side scripts too. From javascript you can only initiate a request and it is the server side script which produces the expected result. So in order to download the image you can initiate the ajax request using javascript and in the server side script you have set a http header as shown below which will initiate the download dialog on the browser
Content-Disposition: attachment; filename="image.jpg";
Or otherwise you will get it as a binary response from the server. Which again you have to use javascript to write it as a file on the client machine, which is not possible as it is a security violation to write a file via javascript.
Hope this helps you
For each image on the screen, create a hidden div element that has a large version of the image and a download button. When the appropriate image is clicked, show the correct hidden div object.
Working Demo: http://jsfiddle.net/K3Jkf/2/
It's best to do this type of thing with ajax (a stand-alone PHP page), but as you said you prefer not to do that.
