控制哪些点击会触发jQuery lightGallery

Question

我一直在尝试在我的网站上实现jQuery LightGallery，但我有一个独特的结构来实现缩略图的需要。这些图库用于在只有一个人查看图库的特定活动中拍摄的照片。我有我自己的基于javascript的‘喜欢’这些照片的系统，所以人们可以喜欢这些照片。问题是人们想在手机上看图片，而这个画廊并不是为此而建的。LightGallery就是答案。因此，在每个缩略图的下面，我有一个LIKE按钮，这是一个DIV，上面有一个链接，它会触发一个javascript函数。问题是，当我试图在LightGallery的列表结构中实现此功能时，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索引，看看能不能把那个DIV放在LightGallery正在做的事情上面，但是每次我点击那个div，它都会放大照片。

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

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

Answer 1

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

如果您打开lightgallery.js，然后转到第176行，I changed it from：

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

至

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

因为我想用来显示弹出窗口的链接上的类名是zoom。你也可以扩展插件的选项，把它写成选择器。

Answer 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;
  });

Answer 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();
});