Теперь давайте разберем, как установить такую галерею-карусель на свой сайт. Сразу скажу, что процесс установки довольно прост и быстр, и подойдет для начального уровня пользователей.
Инструкция по установке галереи:
Шаг 1. Скачать и распаковать архив с исходниками. Внутри вы найдете папки со стилями, картинками, js-скриптами и текстовый файл с html-кодом.
Шаг 2. Подготовить изображения. В галерее по умолчанию используется 12 картинок в формате jpg размером 480х260 рх.
Шаг 3. Сформировать структуру галереи. Для этого готовый html-код из архива разместить на своем сайте между тегами <body>... </body> в том месте, где должна выводится галерея. В моем случае галерея является частью хедера. В самом коде заменить пути и подписи к картинкам на свои. Если не очень хочется переписывать пути, то при подготовке картинок им стоит оставить прежние названия, а если точнее, в данном примере в качестве названий картинок используется нумерация от 1 до 12.
Шаг 4. За внешний вид галереи отвечают стили, поэтому на данном этапе нужно подключить файлы css. Для этого в исходный код сайта между тегами <head>... </head> прописываются следующие строки:
<link rel="stylesheet" type="text/css" href="/css/demo.css" />
<link rel="stylesheet" type="text/css" href="gallery_3d/css/style.css" />
<script type="text/javascript" src="gallery_3d/js/modernizr.custom.53451.js"></script>
Шаг 5. На хостинге, в корневой директории создать отдельную папку для галереи. Я назвала ее "gallery_3d". Затем в эту папку перетянуть все исходники из архива, кроме текстового файла с кодом.
Шаг 6. Загрузить страницу с установленной галереей на сервер, после чего проверить работоспособность.
Всё, на этом установка галереи завершена! По умолчанию активирован режим автоматической смены картинок. Если вас по какой-то причине он не устраивает, то можно включить ручное перелистывание. Для этого в html-коде, в параметрах функции, инициирующей работу галереи, следует убрать строку autoplay: true, отвечающую за авторежим:
$(function() {
$('#dg-container').gallery({
autoplay: true
})
Стрелочки для пагинации вложены в папку images, их вместе с изображениями нужно загрузить на сервер. На этом материал завершаю, как видите, установка галереи действительно проста. Без подготовки картинок весь процесс занимает максимум 10 минут.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат набор иконок на строительную тематику. В наборе 30 flat-иконок в формате PNG размером 512х512 рх.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!