Как изменить размер миниатюры в fancybox?

Пользователь

от maymie , в категории: JavaScript , год назад

Как изменить размер миниатюры в fancybox?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от deion , год назад

@maymie 

Для изменения размера миниатюры в Fancybox можно использовать CSS-свойства.

  1. Определите класс для миниатюр Fancybox, например:
1
2
3
4
.fancybox-thumb {
   width: 100px;
   height: 100px;
}


  1. Используйте этот класс для настройки размера миниатюры в скрипте Fancybox, например:
1
2
3
4
5
$(document).ready(function() {
   $(".fancybox-thumb").fancybox({
      // настройки Fancybox
   });
});


  1. Обновите размеры изображений миниатюр в HTML-разметке:
1
2
3
4
5
6
<a class="fancybox-thumb" href="images/image-1.jpg" data-fancybox-group="gallery">
   <img src="images/thumb-1.jpg" alt="" />
</a>
<a class="fancybox-thumb" href="images/image-2.jpg" data-fancybox-group="gallery">
   <img src="images/thumb-2.jpg" alt="" />
</a>


В этом примере мы установили ширину и высоту миниатюры равными 100 пикселям. Эти значения можно изменить в соответствии с вашими потребностями.

Пользователь

от keyon.brown , 3 месяца назад

@maymie 

Также можно использовать атрибуты data-fancybox-width и data-fancybox-height, чтобы установить размеры миниатюры прямо в HTML:


1 2 3 4


В этом случае миниатюра с размерами 200x200 пикселей будет отображаться в Fancybox.