Wyłącz lightbox z javascript

Question

Mam obraz, który po kliknięciu otworzy się w lightboxie (skrypt z http://lokeshdhakar.com/projects/lightbox2/) i chcę go wyłączyć, gdy przycisk zostanie wyłączony. (Tak więc kliknięcie obrazu nie robi nic.)

Próbowałem użyć .off i .unbind po kilku innych odpowiedziach na stronie, aby wyłączyć lightbox, ale żaden z nich nie działa dla mnie. Podobno podążałem za How do I dynamically enable/disable links with jQuery?, ale nie miałem szczęścia.

Poniżej znajduje się kod 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> 
... 

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

Każda pomoc będzie mile widziane.

Answer 1

Musisz wyłączyć oba lightbox (usuwając atrybut data-lightbox, którego szuka) i domyślną funkcjonalność hiperłącza.

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

Następnie kliknąć na poniższy ponownie włączyć funkcję domyślnego kliknij:

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

Inną opcją wyłączenia lightbox byłoby po prostu usunąć atrybut „data-lightbox” i zapisać go tymczasowo jako zamiast tego atrybut "data-oldlightbox".

Uważam, że biblioteka powinna była użyć klasy do określenia, które elementy kwalifikują się do lightboxingu. Jest to ważne dla użytkownika, nie tylko biblioteki, i powinno być zaznaczone semantycznie. Atrybuty danych nie są dla haków CSS.