• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 278
  • Last Modified:

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 ?
1 Solution
Please refer to the following link:


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

Good Luck!
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().
Anuradha GoliSystems 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/
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.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now