Gallery not working properly on mobile device

[lindavanruiten1]

Hi, I hope you guys can help
I used this code: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/P10/
to make this gallery: http://www.branchoutadvertising.com/apm/index2.html
on computers it works great! LOVE IT!
however, I tried it on my iPhone and it doesn't seem to work as well,
I can click on an image and it will show up, however clicking out of the image is the problem...
thanks!

[jscheuer1]

Hmm, seems OK to me. Strictly speaking, there is no hover on a mobile. However, most mobile devices fire it on touchstart. The gallery appears to work that way to me. Tap an image, see it enlarged. Tap another, it switches to that one. tap in a neutral area, and whatever image (if any) was displayed as enlarged, stops being shown that way.

I did notice that the page 'navaigates' to #thumb - this could cause some mobile browsers to reload the page. If that's an issue, just add this short script right before the page's closing </body> tag (will not harm performance on regular computers, and might actually be beneficial there for the same reason - avoiding unintended navigation/reload):


<script type="text/javascript">
;(function(){
var i = 0, p;
while ((p = document.links[i++])){if(p.hash == '#thumb'){p.onclick=function(){return false;}}}
})();
</script>

But, as I say, I believe what you're seeing is normal for hover on most touch devices, especially touch devices which do not also have a pointing device (like a mouse).

[lindavanruiten1]

Thanks for your reply!
The issue I'm talking about:
You click a picture and it works fine. You can click another picture and it changes pictures fine. And if you want to click a neutral area it only closes out if you click above the picture gallery. If I click the text under the gallery it won't close out.
For example. If I click on the text "all side dumps are made of heavy duty tubing"
Thanks for the reply and code!!

[molendijk]

And if you want to click a neutral area it only closes out if you click above the picture gallery. If I click the text under the gallery it won't close out.
Confirmed here (I'm using an iPad Air).

[jscheuer1]

OK, I'll grant that. Minor issue. Works though in iPhone 6 and iPad emulation here (neutral area below the gallery on the demo page, and your example page makes the enlarged image go away). So I cannot diagnose/help further because I don't have an actual touch device to test on. My apologies though, as I can see how this might be annoying, though not crippling. I would add that this css gallery was designed prior to wide use of touch devices. That doesn't mean it cannot possibly be improved. I'm thinking the issue I mentioned MIGHT (only might, can't be sure) enter into it. Have you tried adding the code I suggested? There's no real reason to expect it will fix the problem, but it might, as hash tags are somewhat dependent upon what part of the page one is on.

If all else fails, you could put a span something like so above the thumbnails:


<span style="cursor: pointer; color: navy; text-decoration: underline;">Dismiss Enlarged Image</span>

Try the script I suggested first (if you haven't already). And make sure to refresh the page after changes to see any results.

I have at least one other idea, so keep me posted.