我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">>></a>
</div>
<div id="shName"> </div>
<div id="shCount"> ( 1 / 48 ) </div>
</div></div></div>
最佳答案
您有 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>
关于关闭 shutter-reloaded.js 的 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20940321/