Javascript關閉快門reloaded.js

Question

我found the snippet of code below，但它不工作。有人可以建議嗎？

當使用NextGen畫廊和快門效果時，我希望能夠在照片外部點擊時關閉照片燈箱。默認操作是單擊要關閉的照片。這很奇怪。

當我進入Chrome JavaScript調試並鍵入shutterReloaded.hideShutter();它關閉燈箱。但是，當我點擊3個元素中的一個時，它不會關閉它。沒有觀察到錯誤。

addCloseButton函數也不起作用。我假設他們是相關的問題。

<script type="text/javascript"> 

$(document).ready(function() { 

    $(document).on('click', '#shDisplay', function(e) { 
    shutterReloaded.hideShutter(); 
    }); 

    $(document).on('click', '#shShutter', function(e) { 
    shutterReloaded.hideShutter(); 
    }); 

    $('.ngg-gallery-thumbnail').click(function(e) { 
    addCloseButton(); 
    }); 

    $(document).on('click', '#nextpic', function(e) { 
    addCloseButton(); 
    }); 

    $(document).on('click', '#prevpic', function(e) { 
    addCloseButton(); 
    }); 

    function addCloseButton() { 
    $('#shWrap').append('<a href="javascript:void(0)" onclick="shutterReloaded.hideShutter();" id="shCloseButton">[x]</a>'); 

    $('#shWrap').css({'position':'relative'}); 

    $('#shCloseButton').css({ 
    'position': 'absolute', 
    'top':'5px', 
    'left':'50%' 
    }); 

    var halfWidth = ($('#shTopImg').width()/2) - 25; 

    $('#shCloseButton').css({'margin-left': halfWidth + 'px'}); 
    } 
}); 
</script> 

這裏是從畫廊HTML片段：

<div id="ngg-image-103" class="ngg-gallery-thumbnail-box" > 
      <div class="ngg-gallery-thumbnail" > 
       <a href="http://mysite1.com/IMG_0197.jpg" title=" " class="shutterset_set_3" > 
             <img title="IMG_0197" alt="Pechie " src="http://mysite1.com/IMG0197.jpg" width="215" height="215" /> 
            </a> 
       <label><input type="checkbox" name="pid[]" value="103" /><span id="image_label">IMG_0197</span></label> 
      </div> 
     </div> 

，當你點擊一個照片，它看起來好像快門重裝上陣重寫與該信息的DOM，但更新爲新照片點擊：

<div id="shDisplay" style="top: 3px;"> 
<div id="shWrap" style="visibility: visible;"> 
<img src="http://mysite1.com/IMG_0437.jpg" id="shTopImg" title="Click to Close" onload="shutterReloaded.showImg();" onclick="shutterReloaded.hideShutter();" width="605" height="908"> 
<div id="shTitle" style="width: 601px;"> 
<div id="shPrev"></div> 
<div id="shNext"> 
<a href="#" id="nextpic" onclick="shutterReloaded.make(10);return false">&gt;&gt;</a> 
</div> 
<div id="shName"> </div> 
<div id="shCount">&nbsp;(&nbsp;1&nbsp;/&nbsp;48&nbsp;)&nbsp;</div> 
</div></div></div> 

Answer 1

你有一個HTML代碼的例子嗎？似乎你的處理程序沒有工作......也許是因爲你使用了錯誤的選擇器...

但是...你可以嘗試重新綁定「關閉處理程序」，每當你確信關閉botton，當你確定但如你綁定處理程序的元素在DOM：

<script type="text/javascript"> 

$(function() { 

    if(typeof $.fn.on === "undefined") $.fn.on = $.fn.live; 
    if(typeof $.fn.off === "undefined") $.fn.off = $.fn.die; 
    $('.ngg-gallery-thumbnail,#nextpic,#prevpic').on("click", function(e) { 
     addCloseButton(); 
    }); 

    function addCloseButton() { 
     $('#shWrap').css({'position':'relative'}); 
     $('#shWrap').append('<a href="javascript:void(0)" onclick="shutterReloaded.hideShutter();" style="position:absolute; top:5px; left:50%" id="shCloseButton">[x]</a>'); 

     var halfWidth = ($('#shTopImg').width()/2) - 25; 
     $('#shCloseButton').css({'margin-left': halfWidth + 'px'}); 

     $('#shShutter,#shDisplay').off().on('click', function(e) { // I do a syntax error here: .off.on ---> .off().on 
      shutterReloaded.hideShutter(); 
     }); 
    } 
}); 
</script>