I'm converting a 'desk-top' web site to Responsive Design. The desktop version may be seen here (some responsive features have been included just to demonstrate this post)
In the desktop design almost all images are clickable, and when clicked are shown enlarged via a jQuery 'lightbox' process. There is also a Gallery page. On a smart phone tapping the image has the same effect, but the result is a mess and there's no obvious way to go back.
echo "<div class='rcolimg'>";
echo "<a href='/gallery/" . $imgref . ".jpg' class='lightbox' title='" . $title . "'><img src='/gallery/" . $imgref . ".jpg' alt='" . $title . "' /></a>";
The snippet above is part of a loop, and the value of the variables is taken from an array, a different image is shown with each iteration.
I'm looking for a way to prevent this happening on a phone, essentially by preventing the call to the lightbox altogether, since it serves no purpose at this size, and I don't wish to download the larger image either. I can hide the anchors with CSS, but that hides the images too, which is not what I want.
Any suggestions, please ?