Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2019, 14:59
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 123

Как поместить стрелки навигации внутри контейнера с картинкой fancybox?
Есть группа картинок галереи fancybox 3 версии.

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

Если есть вариант создать белые отступы от картинки так, чтобы при раскрытии картинки не наблюдалось эффекта дергания - будет вообще здорово!

Код: https://jsfiddle.net/zycw68r4/
$('[data-fancybox="gallery"]').fancybox({
  btnTpl: {

    arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left prev" title="{{PREV}}">' +
      '<i class="fa fa-angle-left" aria-hidden="true"></i>' +
      "</button>",

    arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right next" title="{{NEXT}}">' +
      '<i class="fa fa-angle-right" aria-hidden="true"></i>' +
      "</button>"

  }

});

<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg"></a>
<a data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg"></a>

.fancybox-container .fancybox-image {
  padding: 80px;
  background: #fff;
  border-radius: 20px;
}

.fancybox-container .fancybox-navigation .fancybox-button.prev,
.fancybox-container .fancybox-navigation .fancybox-button.next {
  width: 69px;
  height: 69px;
  font-size: 35px;
  border-radius: 50%;
  border: none;
  background-color: #fe7f40;
  color: white;
  cursor: pointer;
  padding: 0;
}

Последний раз редактировалось giwuf, 05.03.2019 в 15:11.
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2019, 17:06
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 123

Решил вот так
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заставить fancybox вспывать не по клику а по событию onload ??? ilyas-> Элементы интерфейса 24 28.07.2013 12:54
как в galleriffic внедрить fancybox lara_ jQuery 14 26.02.2013 15:53
Как получит ссылку на элемент внутри которого запустили JS код? aRpi Events/DOM/Window 20 02.10.2011 12:36
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 08:20
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 10:49