jquery - fancybox 链接将浏览器重定向到图像路径

Question

我试图在单击时显示在花式框（2）中放大的内容。问题是，当点击图像时，尽管它正确显示在幻想框内，但浏览器会离开页面并转到 href 中定义的链接。我怎样才能防止这种情况？

<script type="text/javascript">
  $(document).ready(function() {
  $(".fancybox").fancybox({
    helpers :{
      title :{
         type : 'over'
      }
     }
   });
 });
</script>

<table>
  <tbody>
    <tr>
      <td>
        <a class="fancybox ui-link" title="My Image href="http://localhost/images/my_image.jpg"><img style="width:64px; height:64px;" src="images/my_image.jpg" alt=""></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我知道已经很晚了，但是......它可以帮助某人。

我有同样的问题，并意识到我们使用data-src而不是 * href：

<a data-fancybox="image" data-src={{asset('uploads/sobre/'.$itemimage)}}"  data-caption="{{$item->title}}">

Answer 2

首先，您的 html 代码中的 Title 属性缺少一个 "。

其次，我不确定，但您应该尝试使用图像的相对路径而不是绝对路径。

例如 ：

<a class="fancybox ui-link" title="My Image" href="images/my_image.jpg"><img style="width:64px; height:64px;" src="images/my_image.jpg" alt="" /></a>