1

一直在尝试在我的网站上实现 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 代码更改为仅添加触发图像放大的链接以仅添加图像，而不是整个列表项？或者也许让它只听缩略图而不是整个列表项的点击？谢谢！

这是一张照片来说明我的观点...... 我希望它如何工作的照片

4

3 回答 3

1

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

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

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

至

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

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

于 2016-02-20T11:22:14.747 回答
0

我已经编辑并添加了 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;
  });
于 2015-06-06T07:39:10.617 回答
0

我已经设法用 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();
});
于 2018-02-16T10:30:42.317 回答