Как оставить кнопки Fancybox Next и Previous видимыми

Question

Я использую fancybox для отображения некоторых изображений. В настоящее время, когда пользователи наводят на изображение, отображается следующая или предыдущая кнопка. Однако некоторые пользователи на самом деле не осознают этого и закрывают коробку фантазии после просмотра первого изображения.

Итак, я хочу, чтобы кнопки оставались постоянно видимыми. Тем не менее, я понятия не имел, как это сделать. Я пытался изменить fancybox css

#fancybox-left, #fancybox-right {
position: absolute;
bottom: 0px;
height: 100%;
width: 35%;
cursor: pointer;
outline: none;
background: transparent url('blank.gif');
z-index: 1102;
display: block; // Initially it was "none"
   }

Но это также не работает.

Есть идеи, как это сделать?

Ценю любую помощь ... Спасибо ...

Answer 1

В вашем fancybox css файле найдите этот класс

.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
visibility:hidden;
z-index: 8040;
    }

Просто удалите свойство видимости, и кнопки будут видны постоянно. Делая это, вам не нужно добавлять теги стиля в ваш HTML:)

Answer 2

Вам нужно добавить CSS на странице (после начальной загрузки CSS) -

Например, добавьте это на страницу с вашим fancybox или после вашей таблицы стилей fancybox css в заголовке.

<style type="text/css">

#fancybox-left-ico {
left: 20px;
}

#fancybox-right-ico {
right: 20px;
left: auto;
}

</style> 

И это все.

Answer 3

Встроенное CSS-объявление:

.fancybox-nav span {
  visibility: visible !important;
}