Jump to content

Image Pop-up Window


Recommended Posts

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:





Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. :D


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 :lol:


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.

Link to comment
Share on other sites



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. :)

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...