Carrie Posted March 27, 2009 Report Share Posted March 27, 2009 Hi - I am working on a project that involves showing a thumbnail of an image image and the caption and then having a link to pop-up a new window with the full-sized image and caption. Everything works fine except the caption doesn't show. I am using images via a URL if that helps. Here is my image tag code: "> Thanks! Quote Link to comment Share on other sites More sharing options...
LSW Posted March 27, 2009 Report Share Posted March 27, 2009 Well first thought: What about people with no JS support? Cell phones and those with it turned off? Second thought: What is with people using a keyboard to navigate? Due to Injury, disability, choice or using mobile tools... this will not trigger the image for them. Third thought: Drop the Java Script and use CSS so everyone can see the images. Hide the image off screen by placing it like left-margin: -9999px; normally. Then on Hover and Focus move it to the position on the page you want it. This way, it is there per mouse with hover and for keyboards with Focus. It is one page and you do not force new windows on people. If CSS is not supported, the picture defaults to where you have it in the HTML so it is visible as full size and thumbnail. You can place it anywhere on the page. http://meyerweb.com/eric/css/edge/popups/demo2.html Quote Link to comment Share on other sites More sharing options...
Carrie Posted March 27, 2009 Author Report Share Posted March 27, 2009 It is a requirement the image be clicked on, it is also a requirement to have the window pop up. I think the caption isn't showing because the image is being brought up by URL. On this site there are images saved to the servers that are being called and images called by URL. The images on the server pop up in the window with the caption showing, and the images called by URL do not. Is this clear? PS. No one will be connecting via phone as this is in-classroom material Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 27, 2009 Report Share Posted March 27, 2009 have you looked at lightbox or greybox as javascript frameworks to do this? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 27, 2009 Report Share Posted March 27, 2009 As far as I know, you'll have to create a separate page (with image and caption) for each popup. Quote Link to comment Share on other sites More sharing options...
LSW Posted March 27, 2009 Report Share Posted March 27, 2009 Oh... OK, that is then different, always helps if you say things are shool projects. The argument remains though, ask your teacher if you will be learning web accessible ways to do things as this requirement is in fact inaccessible per sec. 508 and the W3C WAI WCAG2 Guidelines as it keeps many people from using it. Who knows, maybe you can convince them to teach accessibility in web design. I would likely flunk such school courses if I took them... I have been building web site correctly for to long to do it the school way. Because I teach web accessibiliy for the state of Alaska, I would not back down and argue it constantly that is goes with modern web design.... I would flunk or get tossed out My wife speaks fluent English, less accent than I have, but flunked English in school because Germans learn British English and she always spoke US English. Quote Link to comment Share on other sites More sharing options...
monkeysaurus Posted March 28, 2009 Report Share Posted March 28, 2009 Hi, It is possible to use Javascript in a more accessible way using the progressive enhancement model and unobtrusive techniques. The basic premise is that you use fully functional HTML and add additional functionality using javascript. Check out this lightbox clone as an example. With javascript on, you get a nice pop-up effect. With javascript off, you get a normal image link with a title which is keyboard accessible too. In your specific example, I would create a normal, fully functional link to the new page. I'd then write a bit of JS (without using onclick, onhover, or any stuff like that) which would 'catch' the event and do something a little different if javascript was switched on. For example, something like this (using jQuery for convenience): Javascript doesn't have to be inaccessible, and it doesn't have to use ugly markup, but a little thought needs to be put into how best to use it. Like every other tool we use on the web, it can be used well, or it can be used badly. Hope there's some food for thought somewhere in there. Quote Link to comment Share on other sites More sharing options...
dms Posted March 30, 2009 Report Share Posted March 30, 2009 As Eric mentioned, create a new page for the popup. Not familiar with Javascript, but should be able to take care of with html/css. The title will be your caption on the thumbnail. title="TheCaption"> alt= "thumbnailDiscription"/> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.