fancybox 链接将浏览器重定向到图像路径答案

【问题标题】：fancybox link redirects browser to image pathfancybox 链接将浏览器重定向到图像路径
【发布时间】：2013-02-25 15:36:02
【问题描述】：

我试图在单击时显示在花式框(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>

【问题讨论】：

检查您是否正确关闭了title 属性。title="My Image 结尾处缺少引号 ...此外，当您说“浏览器导航离开”时，是否意味着该幻想框关闭并在浏览器窗口中打开图像？
fancybox 保持打开状态，但浏览器遵循链接操作，因此在这种情况下，它转到 localhost/images/my_image.jpg
那么fancybox怎么会保持打开状态呢？你可以分享任何链接或创建一个测试页面来查看问题。不确定我是否在关注你。
这个 jsfidle jsfiddle.net/7b2WP/1 有点模拟我的页面。在我的情况下，当我单击图像时，fancybox 不会出现在页面顶部，而是出现在空白页面的顶部。即，正在执行对图像 URL 的 GET 请求
我不确定你做错了什么，老实说，我不知道我或其他人能提供什么帮助。我更正了您的 jsfiddle jsfiddle.net/7b2WP/4 中的基本 html 语法错误，并且 fancybox 可以按预期工作。

标签： jquery fancybox-2

【解决方案1】：

我知道已经晚了，但是……它可以帮助别人。

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

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

【讨论】：

【解决方案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>

【讨论】：

你试过没有fancybox选项吗？像 $("a.fancybox").fancybox();