gallery-fancybox

04 Апр Галерея слайд-шоу FancyBox — Установка на сайт

Размещено в 00:07h in HTML, CSS, Opencart by

Как установить слайд-шоу FancyBox на ваш сайт?

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

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

Есть два способа добавления:

1. Внешний

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

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

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

<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>

3) Размещаем ссылки непосредственно на целевой странице:

<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. Локальный

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

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

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

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

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

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

5) Размещаем ваши ссылки уже непосредственно на целевой странице:

<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>

Пользуемся!

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

Написать