Search code examples
cssmedia-querieshreflightboxprettyphoto

disable prettyphoto on small screens (or any a href link)

I was looking for a way to disable prettyphoto lightbox on mibile devices or any other small screens and after spending hours by trying different script, I discovered a very simple way to do that with css media queries:

html

<div>
    <a class="lightbox" rel="prettyPhoto" href="img.jpg">
        <img src="img.jpg">
    </a>
</div>

css

@media all and (max-width: 479px) {
    a.lightbox {    
        pointer-events: none;
    }
}

But, I just like to know if there is a better (proper?) way? Is it better to use a JS functions ( ($(window).width() )? I want to be sure it will work on any devices. Thanks.

Solution

  • Just wrap it with:

    if ($(window).width() >= 768) { 
    $("a[rel^='prettyPhoto']").prettyPhoto(); 
}

    will work