关闭 shutter-reloaded.js 的 Javascript

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>

当您点击一张照片时，Shutter Reloaded 似乎会使用此信息重写 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 代码示例吗？似乎您的处理程序不工作...可能是因为您使用了错误的选择器...

但是...当您确定绑定(bind)处理程序的元素在 DOM 中时，您可以在每次生成关闭按钮时尝试重新绑定(bind)“关闭处理程序”:

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