Контакты
  • evgenylebedevv@gmail.com
  • +7 960 255 15 53
  • L.E.V.rus

Галерея слайд-шоу FancyBox — Добавление на сайт

gallery-fancybox

Галерея слайд-шоу FancyBox — Добавление на сайт

Галерея FancyBox имеет приятный вид и у нее много функций (модальное окно, увеличение, слайдшоу, переход к каталогу и т.д.)

Здесь можно посмотреть: http://fancyapps.com/fancybox/3/

Дальше два способа:

1. Внешний

Добавляем свежие библиотеки jQuery (необязательно):

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

Добавляем внешние пути на скрипты:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

Делаем ссылки:

<a data-fancybox="gallery" href="big_1.jpg">
    <img src="small_1.jpg">
</a>

<a data-fancybox="gallery" href="big_2.jpg">
    <img src="small_2.jpg">
</a>

Пользуемся!

2. Локальный

Добавляем свежие библиотеки jQuery (необязательно):

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>

Скачиваем файлы тут: http://fancyapps.com/fancybox/3/    http://fancybox.net/

Загружаем к себе на сервер.

Добавляем локальные пути на скрипты:

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

Делаем ссылки:

<a data-fancybox="gallery" href="big_1.jpg">
    <img src="small_1.jpg">
</a>

<a data-fancybox="gallery" href="big_2.jpg">
    <img src="small_2.jpg">
</a>

Пользуемся!

Поделись, если оказалось полезно :)
Нет Комментариев

Написать комментарий