JS animated. Как работать с галерей prettyPhoto

Этот урок покажет как работать с галерей prettyPhoto в шаблоне JS animated.

Давайте посмотрим как добавить собственные изображения и расширить галерею.

1. Откройте нужный .html файл с помощью программы Adobe Dreamweaver (имя используемого .html файла можно найти в адресной строке браузера).

2. Выключите режим Live View, чтобы видеть блочную структуру.

3. Используя режим Split Mode, выберите нужное изображение, чтобы увидеть его код.

4. Класс «lightbox-image» используется для отображения миниатюр.

5. Измените картинку миниатюры на Вашу собственную, код картинки должен выглядеть как на примере ниже:

<figure class="lightbox-image"><img src="images/page3-img9.jpg" alt="" />

6. Класс «img-indent» используется для отображения картинок в сплывающем окне (лайтбоксе).

Укажите название собственного лайтбокс-изображения в следующем коде:

<figure class="img-indent"><a href="images/slide-3.jpg" alt="" />

Сохраните изменения и обновите страницу браузера. Лайтбокс-изображение было успешно добавлено.

Давайте посмотрим как расширить галерею.

1. Выделите последний блок галереи.

2. Сделайте его дубликат, используя функции меню "копировать", "вставить".

Галерея была успешно расширена. Вы можете использовать собственные изображения для каждого элемента галереи.

Это конец урока. Обращайтесь к нам, если у Вас возникнут дополнительные вопросы.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже: