图像和锚点的 FancyBox 问题

Question

我想要在 FancyBox 中没有边距的图像。但是在 JS 中设置选项不起作用。

$("[data-fancybox]").fancybox({
    margin: [0, 0]
    gutter: 0
});

我注意到这是因为封装图像的锚元素的一部分在这些图像之外。你可以在这里看到一个演示：

jsfiddle link

当您将鼠标悬停在底部附近的两个图像之间时，您会看到 'pointer' 光标。
我该怎么做才能解决这个问题？

Answer 1

您可以尝试将您的盒子包裹在 div 中并在其上设置 font-size: 0 样式。这个 link 也很有用。

$("[data-fancybox]").fancybox({
  margin: [0, 0]
  gutter: 0
});

#fancy {
  font-size: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fancy">
<a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
 <img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
 <img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
 <img src="http://placehold.it/150x150" alt="" />
</a><a href="http://placehold.it/500x500" data-fancybox data-caption="My caption">
 <img src="http://placehold.it/150x150" alt="" />
</a>
</div>

Answer 2

您在哪里看到边距，为什么认为您的链接的视觉呈现与 fancyBox 有任何联系？

如果您指的是链接之间的 space，那么最简单的方法是：

a {
  float: left;
}

a img {
  vertical-align: top;
}

https://jsfiddle.net/1u1dnjgq/3/

Answer 3

与其说是 javascript 的问题，不如说是样式的问题：

您在内联元素（锚点）中有内联元素（图像），就像一些斜体文本中有一些粗体文本（更糟糕的是，因为您的图像有很多高度...）。

如果你在锚点周围画一个边框，你就会发现这有多糟糕。浏览器尝试放置图像 "on the line"。图像有些不健康：

并且：在 "inline mode" 中，所有空格都很重要（因此您需要制作标签 ...><... 来避免这种情况。使您的 html 非常丑陋。内联块已经会好一点，但还是有空格：

（您可以在外包装上设置 font-size: 0，但删除这些空格会很丑陋...）

更好的解决方案

解决块和浮动：

图像上的 display:block 防止内部空白计数（删除，弄清楚）。不要忘记 clearfloat 包装 div.

Answer 4

只需使用

a{
  display: inline-block;
}

我不建议直接使用 a，而是使用 class 并将其添加到锚元素。

图像和锚点的 FancyBox 问题

FancyBox issue with images and achors

html

javascript

css

jquery

fancybox