How to disable img <a href> link only on mobile, allow in web?

Question

Using jQuery or another method, I want to disable all links on mobile device and tablets, but still allow the links to work on web/desktop. The code I have:

<div class="large-12 columns photos">
  <div><a href="larger_image1.jpg"><img src="image1.jpg" /></a></div>
  <div><a href="larger_image2.jpg"><img src="image2.jpg" /></a></div>
  <div><a href="larger_image3.jpg"><img src="image3.jpg" /></a></div>
</div>

Strategy: sniff user device, then if mobile, set the link to "javascript:void(0)" or similar.

I hope this is a good question this time. I did some searches both here and on Google, but couldn't solve.

Thanks! Brian

Answer 1

If you mean "disable" as in changing it's url, e.g. index.html into #, then we can do something like this:

// Detect different screens.
$(window).resize(function()
{
    // Detect the current screen width.
    var width = $(window).width();
    // Determine what you define a as a mobile screen size.
    var mobileScreen = 900;
    // Check whether the condition applies.
    if(width <= mobileScreen)
    {
        // Change every href attribute of every a element with #
        $('a').attr('href', '#');
        // You can also hide them, if you want, with
        // $('a').hide();
    }
    else
    {
        // Do nothing otherwise, 
        // or change the href attribute back to an actual url, using ids.
    }
}).resize(); // Trigger the re-size event on page load.

Answer 2

$('.photos a').click(function(event){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        event.preventDefault();
    }
}); 

Very simple jsFiddle for understanding. Try it on mobile, tablet and desktop to see if it works as you've planned.