Css popup image viewer on Ipad

[wensrupert]

The code works great on my PC (Windows 7). Thanxx. But on my Ipad the link opens the greater image, but doesn’t close until another link is touched. So the picture covers text until another link is touched, so you cannot read the covered text. When the greater image is up, you cannot let it disappear only than by leaving the page.
Could someone tell me how I can fix it so it works on Ipad as on PC. I hope the problem is clearly explained (English is not my native language).

[jscheuer1]

Did you try pinching the larger image to get it to shrink?

[wensrupert]

Thanks for your quik answer. Yes, I tried pinching the image, but the image doesn't react at all.

[jscheuer1]

OK, well I'm not sure which css image viewer you're using. Could you post a link to the Dynamic Drive Demo page for it?

That said, there are two or three such css viewers in the DD code library that are all fairly similar. As far as I know, these were all developed without worring about touch devices. They rely upon the the hover: and sometimes focus: pseudo classes of links. Since touch devices don't technically mouse over or mouse out, sometimes these are unreliable. These are somewhat analogous to the mouseover, mouseout and click events in javascript. It looks like what you're missing is acknowledgment of what would on a PC or Laptop be a mouse out.

You might be able to get that by tapping anywhere else on the page, or by tapping on a link that goes nowhere, something like:


<a href="#">Close</a>

or:


<a href="javascript:void(0);">Close</a>

If the gallery is using focus:, either of those (if placed outside the gallery links) could cause a blur event when tapped. But there's no guarantee.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

And tell us which DD css gallery you're using (link to it).

[wensrupert]

Thank you John,
Yesterday I sent an answer, but it didn’t appear in the the thread, so here a new attempt:
Here the link to the popup image viewer on your site. http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P10/
I chose that viewer because of its simplicity. (No Javascript. I’m busy with learning Jquery, but I am not able to use it at this moment) Maybe is that I want not possible without using Java or Jquery, than maybe later I will succeed. Next step for me was the greater image trying to fade in when it appears. But I think that needs Java or Jquery too.
Here the link to the page of my website where the problem appears most.
http://www.beeldinsteen.nl/info.html
Wens

[wensrupert]

Hello John. You are great! I used the first HTML code you suggest with an icon of a cross to nowhere and it works. Simple and clear for the visitor of the site!
Thank you very much for your help!!
Wens