Solved

How to get larger image on click

Posted on 2012-04-09
3
253 Views
Last Modified: 2012-04-11
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 ?
0
Comment
Question by:PhilippeRenaud
3 Comments
 
LVL 9

Expert Comment

by:wasiftoor
Comment Utility
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
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
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
 
LVL 12

Accepted Solution

by:
Anuradha Goli earned 500 total points
Comment Utility
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

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Hovering effect 9 28
Problem to open Excel file 15 35
Create a form which is copy of a form in vb.net 2 16
Hide Tab Page 3 18
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

5 Experts available now in Live!

Get 1:1 Help Now