Question

我使用jquery为照片库创建了一个灯箱。但是，对于移动和较小的视口，我想禁用Jquery脚本。我尝试过几种不同的方法但没有一种方法取得成功。

这是我到目前为止所做的：

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

看起来它应该非常简单，但我不知所措。如果有人能指出我正确的方向，我会非常感激。感谢〜

Answer 1

您可以将WIDTH设置为您想要的任何数字。

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

Answer 2

您可以停用对设备图片的点击

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

在较小的视口中禁用javascript灯箱

2 个答案: