Question

您好我使用的是羽毛灯箱，需要它不会出现在平板电脑或移动设备上。我尝试使用Disable Lightbox in responsive design中的代码但无法使其正常工作。这是代码：

$.noConflict();
jQuery( document ).ready(function( $ ) {
  
var lightbox = '<a href="http://info.ccfa.org/teamchallengetmm?&primary_source_code__c=internet&source_code_detail_1__c=ccteamchallenge.org&source_code_other__c=nottoolate_lightbox&which_event_are_you_interested_in__c=unknown&utm_source=tc_website&utm_medium=sitelink&utm_campaign=summer17&utm_content=nottoolate_lightbox&i_am_interested_in_=undecided"><img src="../images/content/pagebuilder/Summer17-Not-Too-Late-Lightbox-TC-Website.png "></a>';


function startLightbox(){
  $.featherlight(lightbox);
}

console.log(getCookie("tc_lightbox"));
if(getCookie("tc_lightbox")){
}
else{
  setCookie("tc_lightbox", 1);
  setTimeout(startLightbox, 1500);
}


function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}



});

.featherlight-content h1,h3{
  margin:0;
}
.featherlight-content h1{
  font-size:25px;
  font-weight:bold;
}
.featherlight-content form input[type="text"], .featherlight-content form input[type="email"]{
    width:100%;
    height: 34px;
    border: 1px #757576 solid;
    border-radius: 3px;
    font-size: 16px;
    font-family: 'avenirroman';
    color: #999;
    background-color: #fff;
}
.featherlight-content form input[type="submit"]{
    width:100%;
    cursor:pointer;
    background: #f37736;
    padding: 10px 25px;
    color: #fff;
    font-family: 'avenirblack', Arial Black;
    font-size: 20px;
    text-decoration: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
}

.featherlight .featherlight-content {
    background: transparent !important;
}

@media only screen and (max-width: 767px) {
.featherlight img {
    max-width: 100%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

我也试过

if ($(window).width() < 960) {
        $(lightbox).hide();
    }

并使用css

在媒体查询中使用display：none

任何想法？

Answer 1

这个问题

if ($(window).width() < 960) {
    $(lightbox).hide();
}

只是灯箱变量引用的是文本字符串而不是元素。检查他们页面上列出的featherlight演示，您可以尝试这样的事情

$('a[data-featherlight]').hide();

如果这不起作用，您还可以尝试在灯箱字符串中添加一个类

var lightbox = '<a class="hidethis" href="http://info.ccfa.org/teamchallengetmm?&primary_source_code__c=internet&source_code_detail_1__c=ccteamchallenge.org&source_code_other__c=nottoolate_lightbox&which_event_are_you_interested_in__c=unknown&utm_source=tc_website&utm_medium=sitelink&utm_campaign=summer17&utm_content=nottoolate_lightbox&i_am_interested_in_=undecided"><img src="../images/content/pagebuilder/Summer17-Not-Too-Late-Lightbox-TC-Website.png "></a>';

然后使用此行

$('.hidethis').hide();

Answer 2

解决方案不是在小屏幕上隐藏，而是从不加载 ，除非它满足您的要求。您可以使用Modernizr或其他检查screenSize来测试触摸。如果测试没有通过......那么你就不会加载插件。

if ( shouldWeShowLightbox ) {
  lightbox.init();
else {
  // don't do anything.. or possibly inject link HREFS or something different to deal with your situation
}

您还可以定期检查屏幕大小是什么，并在屏幕变大或其他情况下加载插件。大多数高质量的插件都有一个.destroy（）方法来杀死它，如果由于某种原因你离开了那个＆＃39; view＆＃39;或者要求没有达到。

Answer 3

如果你想在手机或平板电脑上禁用羽毛灯，在某处添加这个 jQuery 脚本，它非常适合我的情况！

<script>
jQuery(document).ready(function(){
   if (jQuery(window).width() < 960) {
       jQuery("a[data-featherlight]").attr('href', '').css({'cursor': 'pointer', 'pointer-events' : 'none'});
   }
});
</script>

其中 960 是您要禁用灯箱效果的响应断点（960 像素）。

我们将强制禁用所有具有 data-featherlight 属性的链接

在平板电脑和移动设备中隐藏灯箱

3 个答案: