CODEWITHSUNDEEP
javascriptjqueryhtmlwidthlightbox
swollenboy
swollenboy

Reputation: 65

Disable javascript lightbox when in smaller viewports

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.

Here is what I have so far:

var $overlay = $('<div id="overlay"><div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$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();
   });

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~

Upvotes: 1

Views: 73

Answers (2)

rafahell
rafahell

Reputation: 315

you can disable the click on the images for devices

    var window_width = $(window).width();
     if (window_width <= 960) {   
         $('a > img').click(function(e) { 
         return false; 
         });
    }

Upvotes: 1

Omidam81
Omidam81

Reputation: 1917

you can set WIDTH to any number you want. 

var $overlay = $('<div id="overlay"><div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$overlay.append($image);
$overlay.append($caption);
$("body").append($overlay);
WIDTH = 480;

$(".row a").click(function(event){
 event.preventDefault();
 var imageLocation = $(this).attr("href");
 $image.attr("src", imageLocation);

if($(window).width() > WIDTH) $overlay.show();

   var captionText = $(this).children("img").attr("alt");
   $caption.text(captionText);
 });
 $overlay.click(function(){
   $overlay.hide();
   });

Upvotes: 1

Related Questions