fancybox Как установить, пример использования

Как установить

1. Скачиваем с сайта, распаковываем и помещаем в свой проект файлы jquery.fancybox.min.css и jquery.fancybox.min.js
2. Не забываем подключить файлы в проекте:
   

   <link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.min.css">
   // ...
   <script src="/js/jquery.fancybox.min.js"></script>

   Обратите внимание, что jquery.fancybox.min.js должен быть подключён после библиотеки jquery, иначе работать не будет.

Как использовать

Чтобы фото можно было листать в режиме галереи:

<a href="{{ product.photoPath }}" data-fancybox="gallery" data-caption="{{ product.description }}">
      <img  src="{{ product.photoPath }}">
</a>

Источники

• https://fancyapps.com/fancybox/3/
• https://www.youtube.com/watch?v=Z6WqKS9jXJk