Создание галереи с предпросмотром миниатюр

В этом уроки я покажу вам как создать галерею на jQuery с возможностью предпросмотра миниатюр каждой фотографии. Идея заключается в том, чтобы при наведении курсора мыши на точки, появлялась миниатюра соответствующей фотографии в галерее. При нажатии на эту точку, с правой или левой стороны будет возникать оригинальная фотография.

В уроке будут использоваться фотографии geishaboy500, которые можно найти на его Flickr аккаунте.

Разметка

HTML структура будет состоять из основного контейнера где будут появляться большие фотографии, а так же навигация по миниатюрам:

Просматриваемая миниатюра представляет собой элемент списка. Этому элементу мы дадим специальный класс т.к. хотим, чтобы он отличался от других. Каждый элемент в списке миниатюр содержит ссылку, которая содержит информацию и о самой миниатюре и о оригинальной фотографии. Используя JavaScript, мы будем динамически помещать оригинальное фото на нашу "сцену" путём извлечения пути из атрибута ссылки.

Теперь давайте посмотрим что у нас со стилями.

В первую очередь, оформим главный контейнер. В соответствии с максимальными размерами фото (680 на 450 пикселей), выставим контейнеру такие же параметры (оставив место для списка миниатюр):

Теперь мы оформим контейнер для больших фото. Тут мы установим максимальные размеры, а всё остальное скроем. Это нужно для того, чтобы фотографии анимационно менялись. В нашей JS функции мы как раз этим и займёмся.

Отцентрируем представление фотографий с помощью внешних отступов:

Позиционируем фотографии абсолютно для возможности слайдинга:

Элементы навигации будут оформлены следующим образом:

Список с классом “ps_nav” будет располагаться под полными фотографиями и отцентрирован при помощи внешних отступов:

Ставим значение float для списка:

Каждая ссылка на миниатюру представляет собой точку:

При наведении мы изменим позицию фона:

Специальный элемент, содержащий миниатюру будет позиционироваться абсолютно. Значение top отрицательно, т.к. мы хотим, чтоб элемент возникал над списком. Значение left будет вычисляться динамически. -34.5 пикселя это значение left для самой первой миниатюры в списке:

Описываем стиль для маленького треугольника:

Представление миниатюры будет точно такое же как и у фото. Всё остальное мы скроем:

В итоге мы хотим, чтобы миниатюры позиционировались абсолютно т.к. мы хотим добиться анимированного эффекта слайдера:

Со стилями покончено. Настало время добавить jQuery!

JavaScript

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

Когда курсор мыши будет проходится по точкам мы хотим добиться эффекта слайдера между миниатюрами. Это довольно таки эффектно смотрится.

При клике мы так же будем анимировано менять изображение учитывая какое фото показывать в дальнейшем (справа или слева).

Такого эффекта мы можем добиться, поместив все фото рядом и анимируя значение left каждого изображения.

Давай те же начнём:

(Элемент загрузки не был упомянут в HTML структуре т.к. он находится за пределами главного контейнера. Мы будем показывать элемент загрузки до тех пор, пока все фото не загрузятся)

Теперь проверим что у нас за браузер:

Мы хотим чтобы у миниатюры значение opacity было равно 0 по умолчанию и 1 когда мы наводим на неё мышкой. Т.к. в IE возникают проблемы с фильтром opacity мы будем использовать show/hide вместо анимирования opacity. Так же мы добавляем display:none если браузер IE.

После загрузки изображений, покажем страницу:

Функция showTooltip() показывает миниатюру и отвечает за анимацию оттуда, “откуда мы пришли”:

Функция hideTooltip() скрывает миниатюру (или прячет, если браузер IE):

Следующая функция анимирует полное изображения с правой стороны. Новое изображение “становится на место”:

Функция навигации будет обрабатывать триггер click для каждой точки:

Вот и всё! Надеюсь, вам понравилось и вы примените эту галерею у себя на сайтах!

Данный урок подготовлен для вас командой сайта ruseller.com Источник урока: www.tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ Перевел: Станислав Протасевич Урок создан: 7 Февраля 2011 Просмотров: 58858 Правила перепечатки

5 последних уроков рубрики "jQuery"

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

jQuery плагин для создания временной шкалы.

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.