How to get larger image on click

Hello EE,

I need to create a web site. i have a list of images to insert in a page and when the user clicks an image, I need the image to Pop larger then with an "X" he can close the larger image and return back to the list


How can I do that ?
LVL 1
PhilippeRenaudAsked:
Who is Participating?
 
Anuradha GoliConnect With a Mentor Systems Development / Support SpecialistCommented:
The logic behind this scenario is:
In the list you just display the thumbnail of image and , on its hover /click you show the original image.
When you insert image , store it in to folders one with thumbnails by scaling it to 10% of image size,depends on your image size.
And store all the original files in other folder,to popup big image.

For such implementation logic , you can use lot of Jquery image popups
There are a lot of jQuery plugins available for this

Thickbox ---  http://jquery.com/demo/thickbox/
LightBox --- http://leandrovieira.com/projects/jquery/lightbox/
FancyBox --- http://fancybox.net/
FaceBox --- http://famspam.com/facebox
NyroModal --- http://nyromodal.nyrodev.com/
PiroBox ---  http://www.pirolab.it/pirobox/
0
 
wasiftoorCommented:
Please refer to the following link:

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

You can get the Javascript code as well as the Stylesheet code from here.

Good Luck!
0
 
Meir RivkinFull stack Software EngineerCommented:
add click event handler on each and every image on your page using:
Image1.Attributes["onclick"]="showModalDialog('imagePopup.aspx?url='+this.src,'', '
');

add imagePopup.aspx page, set its position and size and get the image source passing in the url in the Page_load().
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.