JavaScriptを使用したライトボックスを無効にする

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

ライトボックス（見つかる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); 

は、その後に、次の再有効化デフォルトのクリック機能を使用します。

$(objid).parent().unbind('click', preventer); 
$lightboxes.attr("data-lightbox", function(i, old) { 
    return lightboxData[i]; 
}); 

として一時的にそれを「データ・ライトボックス」属性を削除して保存することですライトボックスを無効にするためのもう1つのオプション代わりに "data-oldlightbox"属性を使用します。

ライブラリーは、どの要素がライトボックスに適格であるかを識別するためにクラスを使用していたはずです。これは、ライブラリだけでなくユーザにとっても重要な意味を持ちます。意味的にマークアップする必要があります。データ属性はCSSフックの属性ではありません。