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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от deion , 25 дней назад

@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 пикселям. Эти значения можно изменить в соответствии с вашими потребностями.