Question

我有一张图片，当点击时，会在灯箱中打开（来自http://lokeshdhakar.com/projects/lightbox2/的脚本），而我想要做的是禁用按钮切换为关闭时发生的图像。（因此单击图像不会执行任何操作。）

我尝试在网站上使用.off和.unbind以及其他一些答案来禁用灯箱，但它们都不适用于我。我也按照建议跟踪How do I dynamically enable/disable links with jQuery?，但没有运气。

以下是HTML。

<div style="margin-left:10%;padding:1px 16px;">
  <section id="four_columns">
    <article class="img-item">
      <figure>
        <a href="img/livingroom.jpg" data-lightbox="livingroom"><img id="img_window1" src="img/livingroom.jpg" width="200" height="120"></a>
        <figcaption>
          <strong>Living Room 
            <div class="onoffswitch">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="window1" value="window1" checked>
                <label class="onoffswitch-label" for="window1">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
                </label>
            </div>
          </strong>
        </figcaption>
      </figure>
    </article>
...

和javascript

<script type="text/javascript">
  $(document).ready(function() {
  var full_opacity = 1;
  var faded_opacity = 0.3;
  var fade_speed = 'fast';              
  var objid;

  $('input[name="onoffswitch"]').each(function() {
    objid = "#img_" + $(this).val();

    if($(this).prop('checked')) {
        $(objid).css('opacity', full_opacity);
    }
    else {
        $(objid).css('opacity', faded_opacity);
    }
});

$('input[name="onoffswitch"]').change(function() {
    var objid = "#img_" + $(this).val();
    console.log($(this).prop('checked'));
    if($(this).prop('checked')) {
        $(objid).fadeTo(fade_speed, full_opacity);
        }
        else {
            $(objid).fadeTo(fade_speed, faded_opacity);
            $(objid).parent().unbind('click'); /* Here is where I want to implement the code. */
        }
    });
});
</script>

任何帮助都将不胜感激。

Answer 1

您需要同时禁用灯箱（通过删除它查找的TWMessage属性）和基础超链接的默认功能。

data-lightbox

然后使用以下命令重新启用默认点击功能：

$lightboxes = $(".myImageLinks");    

// save the old data attributes in an array, then remove them
var lightboxData = $lightboxes.map(function() {
    return $(this).data("lightbox");
}).get();
$(objid).parent().removeAttr("data-lightbox");

// prevent the browser from traveling to the link target
var preventer = function(e) { 
    e.preventDefault();
});
$(objid).parent().click(preventer);

禁用灯箱的另一个选择是删除＆＃34;数据灯箱＆＃34;属性并将其临时保存为＆＃34; data-oldlightbox＆＃34;属性改为。

我觉得图书馆应该使用一个类来识别哪些元素符合灯箱的条件。这对用户而言非常重要，而不仅仅是库，并且应该在语义上进行标记。数据属性不适用于CSS挂钩。

使用javascript禁用灯箱

1 个答案: