控制点击触发 jQuery lightGallery答案

【问题标题】：Controlling what clicks trigger jQuery lightGallery控制点击触发 jQuery lightGallery
【发布时间】：2015-06-06 07:02:27
【问题描述】：

一直在尝试在我的网站上实现 jQuery LightGallery，但对于缩略图的需要，我有一个独特的结构。这些画廊用于在特定活动中拍摄的照片，只有一个人查看画廊。对于这些照片，我有自己的基于 javascript 的“LIKE”系统，因此人们可以喜欢这些照片。问题是人们想在手机上查看图像，而画廊不是为此而建的。 LightGallery 就是答案。所以在每个缩略图下面我有一个 LIKE 按钮，它是一个 DIV，上面有一个链接，可以触发一个 javascript 函数。问题是，当我尝试在 LightGallery 的 LIST 结构中实现这一点时，LightGallery 侦听器会覆盖该 DIV 上的链接，而不是触发大图像。比如……

<li data-src="<?=$FrameLink?>" id='Cell<?=$FrameNumber?>'>

<a href="#" title="IMAGE #<?=$FrameNumber?>"><img src="<?=$ThumbLink?>" height="173" width="117" border="0" id='IMG<?=$FrameNumber?>' class="IMGThumb"></a>

<a href="javascript:loadintoIframe('FavList','favlist.php?Name=<?=$Name?>&Do=Remove&Frame=<?=$FrameWOExt?>=')" onclick="FavChange('<?=$FrameNumber?>','ON')"><div id='NoLike<?=$FrameNumber?>' class='NoLike'></div></a>

 </li>

如您所想，最后一个链接和 div 应该允许您单击它并触发 loadintoiframe javascript...但是 LightGallery 会覆盖该链接。我尝试通过 CSS 进行 z-index 以查看是否可以将 DIV 置于 LightGallery 所做的任何事情之上，但每次我尝试单击该 div 时，它只会放大照片。

所以我的问题是如何将 LightGallery 代码更改为仅添加触发图像放大的链接以仅添加图像，而不是整个列表项？或者也许让它只听缩略图而不是整个列表项的点击？谢谢！

这里有一张照片来说明我的观点...... Photo of how I'd like it to work

【问题讨论】：

标签： jquery html href lightgallery

【解决方案1】：

我也遇到了同样的问题。我知道修改插件的原始代码并不理想，但这就是我所做的 - 一个非常小的改动。我必须为我的图像提供链接 - 一个用于下载图像，另一个用于缩放图像并显示在 lightgallery 弹出窗口中。

如果你打开lightgallery.js 然后转到第 176 行我将其更改为：

_this.$items.on('click.lgcustom', function(event) {

到

_this.$items.find('a.zoom').on('click.lgcustom', function(event) {

因为我想用来显示弹出窗口的链接上的类名称为zoom。您还可以扩展插件的选项以将其编写为选择器。

【讨论】：

【解决方案2】：

我已经编辑并添加了 UL 版本，但我认为这可能有点乏味

 $('ul').click(function(event){
  //check whether the anchor tag is the 'LIKE'  
  if (event.target.id.indexOf('NoLike')!=-1)
  {  
     //Using JQuery to trigger the click event of the anchor tag
     //First I get the parent of the div, which is the anchor tag
     var par=$(event.target).parent();
     //Then I bind the href event of the parent anchor tag to another anchor
     var $a=$('<a></a>');
     $a.attr('href',par.attr('href'));
     //This anchor tag $a appends to the body where it is out of the 
     //LightGallery's listeners
     //$('body').append($a);  
     //I commented the above append code, as you donot require it,
     $a.get(0).click();
     //$a.remove(); Remove is not required since not appending to body
     return false;
  }
  return true;
  });

【讨论】：

感谢您的回复！我喜欢你要去的地方，但有两个问题......'NoLike' div 的 ID 实际上在每张图像上都不同。例如，如果图像为 0001.jpg，则 NoLike DIV 的 ID 为 NoLike0001。这允许我更改 div 的背景图像以显示 LIKE 而不是 LIKED。由于随机的图像文件名，这可能在每个画廊上有所不同，我不能指望总是有一个 NoLike0001 div。
其次，我进入了 LightGallery 的主 javascript 文件并四处寻找，但它似乎根本没有在寻找 <li> 列表 html，它使用了最初的 <ul id="light-gallery" class="gallery"> by id，然后查看被点击的孩子。
我已经编辑了代码，我想这应该适用于您的 div，而不管 id 是否发生变化

【解决方案3】：

我已经设法用 3 个功能做到了。在您不想显示图库的元素点击时，只需调用 preventGalleryShow，其他人调用 showGallery。

CSS：

.hidden{
    display:none;
}

JAVASCRIPT：

var hideGallery = function(){
    $('.lg-backdrop').addClass('hidden');
    $('.lg-outer').addClass('hidden');
};

var showGallery = function(){
    $('.lg-backdrop').removeClass('hidden');
    $('.lg-outer').removeClass('hidden');
};

var preventGalleryShow = function(event, $galleryObj){
    event.preventDefault();
    event.stopPropagation();
    $galleryObj.off('onAfterOpen.lg').on('onAfterOpen.lg',function(e){
        hideGallery();
    });
    $galleryObj.trigger('onAfterOpen.lg');
};

示例：

$('.command-delete', function(event){
    preventGalleryShow(event,$gallery);
    //do your magic
});

$('.anythingelse').on('click', function(event){
    showGallery();
});

【讨论】：