Изменить размер предыдущего и следующего оверлеев FancyBox2 в iFrame?

У меня есть хорошая реализация FancyBox2, которая загружает html-страницы в iFrame как галерею.

Однако содержимое, которое я загружаю в iframe, включает ссылки на внешние веб-сайты, которые «заблокированы», если я использую обычную навигацию «предыдущий» и «следующий», которая позволяет пользователю перемещаться по всем элементам галереи.

Как я могу изменить размер оверлея предыдущей/следующей ссылки, чтобы они содержались на левом и правом полях, чтобы я мог предоставить пользователю ссылку на контент?

OR

В качестве альтернативы можно было бы расположить панель навигации кнопок относительно верхней части FancyBox, а не относительно верхней части страницы. В этом случае я бы отключил внутренние предыдущие/следующие ссылки и стрелки.


jquery fancybox fancybox-2
person cole    schedule 16.07.2012    source источник
comment
Я отредактировал свой ответ, чтобы охватить два сценария.   -  person JFK    schedule 17.07.2012

Ответы (1)


arrow_upward
0
arrow_downward

EDIT: если вы хотите изменить размер предыдущего/следующего наложения, добавьте это встроенное объявление CSS ПОСЛЕ загрузки CSS-файла fancybox:

<style type="text/css">
.fancybox-nav {
  top: 50%;
  height: 34px;
  width: 36px;
 }
.fancybox-nav span {
  visibility: visible;
 }
.fancybox-next span {
  left: auto;
  right: 0px;
 }
.fancybox-prev span {
  left: 0px;
 }
</style>

Обратите внимание, что вы должны сделать стрелки видимыми постоянно, иначе посетители не будут знать, куда наводить курсор.

ПРИМЕЧАНИЕ. Это для fancybox v2.0.6+.

С другой стороны, вы не можете установить панель навигации кнопок относительно верхней части FancyBox, потому что она имеет position:fixed и добавлена ​​к тегу body.

Однако вы можете попробовать отредактировать js-файл fancybox-buttons (строка 69+/-) и вместо этого добавить его к селектору .fancybox-skin, а затем поиграть с позицией селектора #fancybox-buttons с помощью css.

person JFK    schedule 16.07.2012