使用 Fancybox 将缩略图放置在底部答案

【问题标题】：Position thumbnails on bottom with Fancybox使用 Fancybox 将缩略图放置在底部
【发布时间】：2019-04-18 15:27:38
【问题描述】：

我正在尝试使用最新的 Fancybox 让缩略图在底部水平显示。虽然 this example works 对我不起作用。

我还在jsfiddle 上尝试了 codepen 中的相同示例代码，但它不起作用，我遇到了同样的问题。它只是转到左上角。 “顶部”CSS 似乎对缩略图没有任何影响。

怎么了？

$('[data-fancybox="images"]').fancybox({
  thumbs: {
    autoStart: true,
    axis: 'x'
  }
})

.fancybox-thumbs {
  top: auto;
  width: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 95px;
  padding: 10px 10px 5px 10px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.3);
}

.fancybox-show-thumbs .fancybox-inner {
  right: 0;
  bottom: 95px;
}

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<h2>fancyBox v3.3 - Thumbnails at the bottom</h2>
<hr class="my-5" />
<p class="imglist">
  <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
  </a>
  <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
  </a>
  <a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/i2KibvLYjqk/240x160" />
  </a>
  <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
  </a>
  <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
  </a>
  <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
  </a>
  <a href="https://source.unsplash.com/ndjyaOp0fOc/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/ndjyaOp0fOc/240x160" />
  </a>
  <a href="https://source.unsplash.com/A-fubu9QJxE/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/A-fubu9QJxE/240x160" />
  </a>
  <a href="https://source.unsplash.com/rkkr6-2I4sg/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/rkkr6-2I4sg/240x160" />
  </a>
  <a href="https://source.unsplash.com/mr_Tg4SI66A/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/mr_Tg4SI66A/240x160" />
  </a>
  <a href="https://source.unsplash.com/YEsedBccUEA/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/YEsedBccUEA/240x160" />
  </a>
  <a href="https://source.unsplash.com/Hw62tzAkXXE/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/Hw62tzAkXXE/240x160" />
  </a>
  <a href="https://source.unsplash.com/Lzx4J_Pb3sk/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/Lzx4J_Pb3sk/240x160" />
  </a>
  <a href="https://source.unsplash.com/cZVthlrnlnQ/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/cZVthlrnlnQ/240x160" />
  </a>
  <a href="https://source.unsplash.com/vddccTqwal8/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/vddccTqwal8/240x160" />
  </a>
  <a href="https://source.unsplash.com/Sj5efgWguDs/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/Sj5efgWguDs/240x160" />
  </a>
  <a href="https://source.unsplash.com/Y7y7fe8hrh0/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/Y7y7fe8hrh0/240x160" />
  </a>
  <a href="https://source.unsplash.com/sYegwYtIqJg/1600x900" data-fancybox="images" data-type="image">
    <img src="https://source.unsplash.com/sYegwYtIqJg/240x160" />
  </a>
</p>

【问题讨论】：

标签： jquery css fancybox fancybox-3

【解决方案1】：

这似乎与加载 CSS 的顺序有关。

在您的jsFiddle 中，您的 CSS 在 HTML 窗格中的样式表之前加载。由于您的样式与 FancyBox 的默认样式具有相同的 specificity，因此当 FancyBox 随后加载时，您的样式将被覆盖。

在特异性平局中，最后定义的规则获胜 (MDN)

请注意，您的样式已被划掉以支持 FancyBox：

但是，当样式表作为“资源”添加到左侧面板中时，它会按预期工作，因为您的样式是最后加载的。

确保您的样式始终优先的一种方法是添加baseClass 并增加您的样式的特异性。见FancyBox options。

这是一个演示：

$('[data-fancybox="images"]').fancybox({
  baseClass: 'myFancyBox',
  thumbs: {
    autoStart: true,
    axis: 'x'
  }
})

.myFancyBox .fancybox-thumbs {
  top: auto;
  width: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 95px;
  padding: 10px 10px 5px 10px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.3);
}

.myFancyBox .fancybox-show-thumbs .fancybox-inner {
  right: 0;
  bottom: 95px;
}

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<p class="imglist">
  <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images"><img src="https://source.unsplash.com/juHayWuaaoQ/240x160"></a>
  <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images"><img src="https://source.unsplash.com/eWFdaPRFjwE/240x160"></a>
  <a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images"><img src="https://source.unsplash.com/i2KibvLYjqk/240x160"></a>
  <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images"><img src="https://source.unsplash.com/RFgO9B_OR4g/240x160"></a>
  <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images"><img src="https://source.unsplash.com/7bwQXzbF6KE/240x160"></a>
  <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images"><img src="https://source.unsplash.com/NhU0nUR7920/240x160"></a>
  <a href="https://source.unsplash.com/ndjyaOp0fOc/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/ndjyaOp0fOc/240x160"></a>
  <a href="https://source.unsplash.com/A-fubu9QJxE/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/A-fubu9QJxE/240x160"></a>
  <a href="https://source.unsplash.com/rkkr6-2I4sg/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/rkkr6-2I4sg/240x160"></a>
  <a href="https://source.unsplash.com/mr_Tg4SI66A/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/mr_Tg4SI66A/240x160"></a>
  <a href="https://source.unsplash.com/YEsedBccUEA/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/YEsedBccUEA/240x160"></a>
  <a href="https://source.unsplash.com/Hw62tzAkXXE/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/Hw62tzAkXXE/240x160"></a>
  <a href="https://source.unsplash.com/Lzx4J_Pb3sk/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/Lzx4J_Pb3sk/240x160"></a>
  <a href="https://source.unsplash.com/cZVthlrnlnQ/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/cZVthlrnlnQ/240x160"></a>
  <a href="https://source.unsplash.com/vddccTqwal8/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/vddccTqwal8/240x160"></a>
  <a href="https://source.unsplash.com/Sj5efgWguDs/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/Sj5efgWguDs/240x160"></a>
  <a href="https://source.unsplash.com/Y7y7fe8hrh0/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/Y7y7fe8hrh0/240x160"></a>
  <a href="https://source.unsplash.com/sYegwYtIqJg/1600x900" data-fancybox="images"><img src="https://source.unsplash.com/sYegwYtIqJg/240x160"></a>
</p>

【讨论】：