Frage

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>
War es hilfreich?

Lösung

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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top