Question

For an image gallery i use lightbox for opening the images. The way i call it is trough an < a > tag with a data-rel as below.

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

Is it possible to call the exact same thing onclick without using < a >?

My complete code is:

<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>

I want to add some buttons that appear on image hover like add to cart or add to favourite. The problem is that the < a > affects everything that is in the image area so the buttons are useless because anywhere i click it openes the image. I thought that making the link inactive and calling lightbox onclick of a separate button would be a solution.

Answer 1

一个体面的，但可能不那么雄辩的解决方案是使用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

最简单的解决方案是在链接上移动按钮。例如，创建如下结构：

<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> tag

2 个答案: