不使用 <a> 标签调用 LightBox onclick

Question

对于图片库，我使用灯箱打开图片。我调用它的方式是通过一个带有 data-rel 的标签，如下所示。

<a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">

是否可以在不使用的情况下调用完全相同的 onclick？

我的完整代码是：

<div class="justified">             
   <a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">
        <img src="../catalog-reseller/wall/abstract/w10197169324.jpg" alt="w10197169324">
    </a>
</div>

我想添加一些出现在图像悬停上的按钮，例如添加到购物车或添加到收藏夹。问题是会影响图像区域中的所有内容，因此按钮无用，因为我在任何地方单击它都会打开图像。我认为使 link 处于非活动状态并调用单独按钮的灯箱 onclick 将是一个解决方案。

Answer 1

一个不错的，但也许不是这样的 eloquent 解决方案是使用 jQuery mouseenter 方法（对于您要为其创建悬停效果的元素）- 并使用 jquery 在悬停期间禁用该锚标记，然后鼠标离开以重新激活锚...您应该为锚和图像添加一个 id 以使其更容易。

//HTML:

  <a id="removeOnHover" ...>
  <img id="hoverHere"...>

//jQuery:
  $( '#hoverHere' )
    .mouseenter(function() {
      $( '#removeOnHover').attr( 'disabled', 'true' );
      //any other code you need...
  })
    .mouseleave(function() {
      $( '#removeOnHover').attr( 'disabled', 'false' );
      //any other code you need...
    });

这样的事情应该有所帮助。

Answer 2

最简单的解决方案是将按钮移到 link 上。例如，创建这样的结构：

<div class="justified">             
   <a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">
        <img src="../catalog-reseller/wall/abstract/w10197169324.jpg" alt="w10197169324">
    </a>
    <button>Add to cart</button>
</div>

然后使用 CSS 使您的按钮绝对定位。

不使用 <a> 标签调用 LightBox onclick

Call LightBox onclick without using <a> tag

javascript

jquery

onclick

lightbox