Mobile detection does not work [#2671360]

This is all very confusing. I thought colorbox Mobile Detection worked, and the only problem was the link - see below. However when I try it again it does not detect screen size changes at all, even after clearing all caches at server and client ends.

I am using an image field and setting Manage Display to Colorbox on the node.

My original problem with leaving the link in place still stands. I can clobber colorbox by putting jQuery.colorbox.remove(); in a script of my own, but then it leaves the link in place from the displayed image to the one that would have appeared in Colorbox, were it active. If someone clicks on the image it jumps to just display the target image with no page styling, headers, navigation, etc, which is very disorienting for a user, particularly on a mobile.

I realise that there may be other cases where this is the desired behaviour, but for simple image display I suggest it is not - it is certainly not in my site design. Please

a) fix the Mobile Detection, and
b) either change the link behaviour, or provide an option to configure it on or off.

Comments

Comment #1

Anonymous (not verified) CreditAttribution: Anonymous commented 18 February 2016 at 17:39

maynardsmith created an issue. See original summary.

Comment #2

Anonymous (not verified) CreditAttribution: Anonymous commented 19 February 2016 at 15:54

Title:	Remove colorbox link when mobile detected	» Mobile detection does not work
Category:	Feature request	» Bug report
Issue summary:	View changes

Comment #3

fanky4 CreditAttribution: fanky4 commented 19 April 2016 at 11:32

Same issue here!

Comment #4

frjo CreditAttribution: frjo commented 20 April 2016 at 00:06

Category:	Bug report	» Support request
Status:	Active	» Fixed

@maynardsmith, I think you mean that Colorbox doesn't detect *window* size changes at all and that is correct. It only checks the *screen* size when it loads and that part works as far as I can tell.

To remove or deactivate the link you can add your own JavaScript, something like this:

(function ($) {

Drupal.behaviors.initColorbox = {
  attach: function (context, settings) {
    if (!$.isFunction($.colorbox) || typeof settings.colorbox === 'undefined') {
      return;
    }

    if (settings.colorbox.mobiledetect && window.matchMedia) {
      // Remove or disable Colorbox image links for small screens.
      var mq = window.matchMedia("(max-width: " + settings.colorbox.mobiledevicewidth + ")");
      if (mq.matches) {
        // OBS! Use only one of the following lines!
        // Use this line to remove the href attribute and effectively doable the link.
        $('.colorbox', context).once('init-colorbox').attr('href','');
        // Use this line to completely remove the link that wraps the image.
        $('.colorbox', context).find('img').unwrap();
      }
    }
  }
};

})(jQuery);