Disable Lightbox in responsive design

Question

I've searched previous SO posts regarding jQuery and responsive design but had no luck finding anything similar. My issue is, I have a website that when it hits > 960px it drops all the eye candy and becomes fluid. On some pages I use lightbox to preview a larger image off of a thumbnail. When the 960px is hit I would like to drop the lightbox effect. Here is how I lightbox set up:

lightbox:

<a href="images/some-img.jpg" rel="lightbox" title="some title">some text &raquo;</a>

Is there way to say disable rel="lightbox" with jQuery at > 960px? Thanks in advance!

Answer 1

You'll have to use js for this. Depending on what lightbox library you are using you may need to reinitialize it after the lightbox rel property is added back.

var lightboxOnResize = function lightboxOnResize() {
    if ($(window).width() < 960) {
        $('a[rel="lightbox"]')
            .removeProp('rel')
            .addClass('lightboxRemoved');
    } else {
        $('a.lightboxRemoved').prop('rel', 'lightbox');
    }
}

$(document).ready(lightboxOnResize);
$(window).resize(lightboxOnResize);

Answer 2

Something like this might work: This code is untested, and will only remove the rel="lightbox", not add it back in on resize. Should be easy enough to add that in if its important to you.

var responsiveLightbox = function () {
   var viewportWidth = $(window).width();
   if (viewportWidth > 960){
       $('[rel=lightbox]').attr('rel', '');
   }
}

$(document).ready(function() {
    responsiveLightbox();
});
$(window).resize(function() {
    responsiveLightbox();
});

Answer 3

This is coding approach.

You need to put a condition while you are hooking up lighbox to div.

Condition would be something like

if(screenPixel>960) { Add my lightbox to the div }

Answer 4

None of the previous answers worked for me to remove Lightbox from a particular element, so I'm posting another solution that could help someone that is currently experiencing a similar issue.

My version of Lightbox2 calls an initList function which binds click functions and based on what elements have been "tagged" in the DOM for use by Lightbox calls then the start function. If you want to disable Lightbox for a particular element for a particular screen size than unbinding the click event could work.

Be careful though with unbinding as there might be other scripts that have click behaviours attached to the element! If you store handlers in a variable you can later reference the behaviour like so unbind('click', handler). Unfortunately, my version of Lightbox2 was not setup in that way, and as far as I can see, version 2.8.2 on Github does not have an unbind function nor a global reference handler variable. So in this context you would have to adapt the codebase when there are other click events attached that you need to keep.

In any case, the code would be something like:

$(document).ready(function() {
  if (screen.width < 1024) {
    $('#some-id').unbind('click');
  }
});

You don't even have to remove the rel property in the a element:

<a href="./linkedcontenturl.ext" id="some-id" rel="lightframe" target="_blank">click here!</a>

Depending on the content you are linking to (PDF for instance) it might be a good idea to add target="_blank" as well, but important is to test the experience first on the target set of devices, different devices could show different behaviours.