?
Solved

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

Posted on 2011-10-05
17
Medium Priority
?
431 Views
Last Modified: 2012-05-12
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
Comment
Question by:Paulmc999
  • 6
  • 5
  • 3
  • +1
15 Comments
 
LVL 12

Accepted Solution

by:
Ramkisan Jagtap earned 1600 total points
ID: 36916256
you can use jquery thickbox for this
Check following linl
http://jquery.com/demo/thickbox/
0
 
LVL 2

Author Comment

by:Paulmc999
ID: 36923380
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
 
LVL 39

Expert Comment

by:gdemaria
ID: 36938735
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36939249
0
 
LVL 2

Author Comment

by:Paulmc999
ID: 36947641
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
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 400 total points
ID: 36947655
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
 
LVL 2

Author Comment

by:Paulmc999
ID: 36947680
Thanks guys!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36947783
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
 
LVL 2

Author Comment

by:Paulmc999
ID: 36947803
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36948063
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
 
LVL 2

Author Comment

by:Paulmc999
ID: 36948527
I am checking with expertsexchange if there are some guidelines or criterii for selecting the grading and I will get back to you.
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 36948720

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
 
LVL 2

Author Comment

by:Paulmc999
ID: 36948762
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
 
LVL 39

Expert Comment

by:gdemaria
ID: 36948814
Thanks for understand Paul :)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36950978
Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
If you are a mobile app developer and especially develop hybrid mobile apps then these 4 mistakes you must avoid for hybrid app development to be the more genuine app developer.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Screencast - Getting to Know the Pipeline
Suggested Courses

864 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