Leuchtkasten mit JavaScript deaktivieren

Question

Ich habe ein Bild, das beim Anklicken, öffnet sich in einem Leuchtkasten (Skript von http://lokeshdhakar.com/projects/lightbox2/) und was ich tun möchte, ist deaktivieren, dass passiert, wenn eine Schaltfläche ausgeschaltet ist. (Das Klicken auf das Bild tut also nichts.)

Ich habe versucht, .off und .unbind nach einigen anderen Antworten auf der Website zu verwenden, um den Leuchtkasten zu deaktivieren, aber keiner von ihnen funktioniert für mich. Ich habe auch How do I dynamically enable/disable links with jQuery? wie vorgeschlagen gefolgt, aber hatte kein Glück.

Unten ist der 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> 
... 

und 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> 

Jede Hilfe würde geschätzt.

Answer 1

Sie müssen sowohl die Lightbox deaktivieren (indem Sie das Attribut data-lightbox entfernen, nach dem sie sucht) als auch die Standardfunktionalität des zugrunde liegenden Hyperlinks.

$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); 

dann wie folgt wieder aktivieren die Standard-Click-Funktionalität:

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

Eine weitere Option für den Leuchtkasten deaktivieren wäre, nur die „Daten Leuchtkasten“ -Attribut zu entfernen und speichern Sie es vorübergehend als stattdessen ein Attribut "data-oldlightbox".

Ich glaube, dass die Bibliothek eine Klasse verwendet haben sollte, um zu identifizieren, welche Elemente für Lightbox-Objekte geeignet sind. Das ist wichtig für den Benutzer, nicht nur für die Bibliothek, und sollte semantisch markiert werden. Datenattribute sind nicht für CSS-Hooks.