title: Disable javascript lightbox when in smaller viewports
body: <p>I created a lightbox for a photo gallery using jquery. However, for mobile and smaller viewports I'd like to disable the Jquery script. I've tried a few different methods but none resulted in success.  </p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>var $overlay = $('&lt;div id="overlay"&gt;&lt;div&gt;');
  var $image = $("&lt;img&gt;");
  var $caption = $("&lt;p&gt;&lt;/p&gt;");
  $overlay.append($image);
  $overlay.append($caption);
  $("body").append($overlay);
  
  $(".row a").click(function(event){
   event.preventDefault();
   var imageLocation = $(this).attr("href");
   $image.attr("src", imageLocation);
   $overlay.show();
     var captionText = $(this).children("img").attr("alt");
     $caption.text(captionText);
   });
   $overlay.click(function(){
     $overlay.hide();
     });
  </code></pre>
  
  <p>It seems like it should be super simple, but I'm at a loss. If anyone can point me in the right direction I would really appreciate it. Thanks~</p>