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

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.
0
Paulmc999
Asked:
Paulmc999
  • 6
  • 5
  • 3
  • +1
2 Solutions
 
Ramkisan JagtapLead DeveloperCommented:
you can use jquery thickbox for this
Check following linl
http://jquery.com/demo/thickbox/
0
 
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.
0
 
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...  

0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
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.
0
 
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>
0
 
Paulmc999Author Commented:
Thanks guys!
0
 
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.
0
 
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
0
 
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
0
 
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.
0
 
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.
0
 
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.
0
 
gdemariaCommented:
Thanks for understand Paul :)
0
 
Michel PlungjanIT ExpertCommented:
Thanks!
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.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 6
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now