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);