Похоже, это связано с порядком загрузки CSS.
В вашем jsFiddle ваш CSS загружается до таблиц стилей на панели HTML.Поскольку ваши стили имеют такую же специфичность , что и значения по умолчанию FancyBox, ваши значения переопределяются при последующей загрузке FancyBox.
При привязке специфики последнее определенное правило выигрывает ( MDN)
Обратите внимание, что ваши стили вычеркнуты в пользу FancyBox's:
Однако, когдаТаблицы стилей добавляются как «ресурсы» на левой панели, это работает, как и ожидалось, потому что ваши стили загружаются в последнюю очередь. Пример здесь .
Один из способов гарантировать, что ваши стили всегда имеют приоритет, - это добавить baseClass
и увеличить специфичность ваших стилей.См. Опции FancyBox .
Вот демонстрация:
$('[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>