Javascript to close shutter-reloaded.js

Question

I found the snippet of code below, but it's not working. Can someone advise?

When using the NextGen gallery, and the shutter effect, I want to be able to close the photo lightbox when clicking outside of the photo. Default action is to click the photo to close. That's just weird.

When I go into Chrome JavaScript debug and type shutterReloaded.hideShutter(); it closes the lightbox. However, when I click into one of the 3 elements, it does not close it. No error is observed.

The addCloseButton function also isn't working. I am assuming they are related problems.

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

Here is a snippet from the gallery 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>

and when you click on a photo, it appears as though Shutter Reloaded rewrites to the DOM with this info, but updated for the new photo clicked on:

<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

Have you an example of the code with HTML? Seems that your handler not working... maybe because you use wrong selector...

however... you can try to re-bind the "close handler" every time you generete the close botton, when you are sure that the element where you bind the handler are in 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>