A neat solution to displaying a large image after i click or hover over a thumbnail

Hi I have a web page full of thumbnails and I want the user to see the larger image if s/he clicks on the thumbnail or hovers over it. I found one solution on the internet which displays if hovered over but there seems to be no accurate way of confidently displaying the image centered in the window and mostly it is off screen. Is there a solution to this or does somebody have a better suggestion what I can do? I am looking for either a solution to the centering problem in all browsers OR a suggestion for a neater solution. Thanks.
LVL 2
Paulmc999Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ramkisan JagtapLead DeveloperCommented:
you can use jquery thickbox for this
Check following linl
http://jquery.com/demo/thickbox/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Paulmc999Author Commented:
Hi Ramkisan, Thanks for this, it looks interesting but I need some time to investigate it, my reluctance in using code like this on a publicly accessed website is the fact that it is in javascript and is therefore dependant on the user having javascript enabled in his or her browser. When I write web apps and can control the environment I use javascript all the time. have to say I was hoping for some solution involving asp.net and c# exclusively.
gdemariaCommented:
The action you need to perform is on the client-side.   C# and ASP.Net are server side languages, they have run their course and are no longer present in the code once the page gets to the browser.  Therefore, these languages (or any other server-side language) cannot satisfy your need.   The technologies you can use are either javascript or CSS.  

I'm curious, did you ever look at your logs to see what percent of people actually have javascript disabled?   It must be incredibly low...  

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Paulmc999Author Commented:
OK guys sorry for taking so long to come back to you all, and thanks for all your comments. The CSS thumbnail solution doesn't really do what I need and in the absence of any other suggestions it seems that the javascript solution might be my only option. But if I go with the javascript solution can someone tell me exactly what will happen if the user does not have javascript turned on, is it possible to have an alternative action or message pop up to say to view this photo you need to enable javascript? I don't want the user to get an error. You see it doesn't matter how many people have javascript turned off gdemaria I still need a solution for them, I think its just good programming practice.
Michel PlungjanIT ExpertCommented:
If you use unobtrusive javascript, then there will be no error for the js-challenged.

Just retrofit your zoom onto links that open the image in another window or add
<noscript>
Please be aware that you cannot zoom these images if JavaScript is disabled
</noscript>

or

<div id="noScript">
Please be aware that you cannot zoom these images if JavaScript is disabled
</div>
<script>
document.getElementById("noScript").style.display="none";
</script>
Paulmc999Author Commented:
Thanks guys!
Michel PlungjanIT ExpertCommented:
When does a "C" grade constitute a "Thanks" ?

Please do not give "C" grades without explanation and perhaps a chance to give an answer you will appreciate more.

Assuming that you pressed the button you intended. If so, kindly leave my comment out of the grading.

I have unaccepted the question for your correction.
Paulmc999Author Commented:
the C grade was given because overall i didn't get the solution to my problem that i really needed and had to compromise, sorry for insulting you with the points awarded
Michel PlungjanIT ExpertCommented:
1: "am looking for either a solution to the centering problem in all browsers" - a valid answer http:#a36916256 - there are many, many more if you are not happy.
2: "is it possible to have an alternative action or message pop up to say to view this photo you need to enable javascript" - complete answer: http:#a36947655

There is nothing in native C# or asp.net that will do what you want without javascript.

Since your question is very general, you got a link to a general solution - if you have issues implementing that solution, you can come back and ask some more.

Any of the hundreds of xxxBOX scripts, preferably updated in 2011, will suit your needs as defined in your question. If they do not, please elaborate on your problems and we will help. But a "C" grade is (at least by me) considered _not done_ since you can always delete the question if there are no valid answers.

PS: I have millions of points so I do not care about points. However I DO care about the grades and I believe the answers in this question are complete
Paulmc999Author Commented:
I am checking with expertsexchange if there are some guidelines or criterii for selecting the grading and I will get back to you.
gdemariaCommented:

Below is the EE note on grading.   It has actually been modified, it used to say, you should give the expert an opportunity to improve any grade below an A (which I feel should still apply).   If you equate this to eBay rating system, and "A" is positive feedback, "B" is neutral and "C" is negative...  all vendors want the opporunity to make it right before getting a negative or even neutral rating.    As it says, this isn't school grading.. all questions should get an "A" unless there is a problem.  If there is a problem, you should give the expert and opportunity to make it right.

What's the right grade to give?Grading at Experts Exchange is not like school. It's more like the "10-point Must" system in professional boxing; in other words, an answer is worth an A, unless it doesn't resolve your issue. If it requires you to do a little more research, or figure out one more piece of code, then it's worth a B. If you think it's not worth a B, the custom is to offer the Experts an opportunity to earn a better grade.

Giving a higher grade has no impact on your Available Points.
Paulmc999Author Commented:
Thanks gdemaria, it seems from this then I should grade it as an A and that's what I am doing now. Thanks for clarifying that.
gdemariaCommented:
Thanks for understand Paul :)
Michel PlungjanIT ExpertCommented:
Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Programming

From novice to tech pro — start learning today.