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

 

Давайте для начала разберемся, с чего все надо начинать, В разработке данной галереи мы будем использовать jQuery плагин Flip!, от Lucca Manno для переворачивания миниатюр. Мы так же будем использовать плагин jQuery Mousewheel Plugin от Brandon Aaron. Все плагины можно скачать в исходниках.

И так, приступим. В первую очередь подключим все наши скрипты:

Теперь добавим элемент, который будет отображаться до того, как все изображения не загрузятся:

Далее, мы создадим контейнер со всеми изображениями, которые будут отображены в галерее:

Мы будем использовать атрибут “longdesc” для того, чтобы указать путь к миниатюре. Последний элемент div будет служить шаблоном. Добавим контейнер, который будет хранить контент, показывающийся в левой нижней части экрана.

Как Вы заметили, каждый блок с заголовком помещаем в элемент с классом “tf_content”.

Структура для блока, содержащего миниатюры изображений (располагается в правой части), будет выглядеть следующим образом:

Span будет иметь класс “tf_zoom” или “tf_fullscreen” в зависимости от того в каком режиме мы находимся. И наконец, добавим несколько элементов для навигации:

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

Теперь контейнер будет растянут по всему экрану. Все изображения позиционируем абсолютно. Ширина и высота, в соответствии с расширениями экрана пользователя будут вычислены автоматически с помощью jQuery:

Позиционируем контент:

Заголовок панели с контентом будет оформлен специальным фоном, который мы загрузим через Google Font API. Это сделаем чуть позже.

Теперь выставим параграфу с контентом небольшую тень:

Панель с миниатюрами будет располагаться по центру экрана, в правой его части. Так же придадим данной панели отражение, которое будет видно в браузерах функционирующих на базе Webkit:

Элемент навигации будет располагаться рядом с миниатюрами:

Иконки для зума и полноэкранного режима будут располагаться в правом верхнем углу миниатюры:

Индикатор загрузки отобразим в центре экрана:

Со стилями все, теперь приступим к завершающему этапу.

Для начала добавим метод, который загрузит все наши изображения:

Теперь кэшируем некоторые значения:

Затем, загрузим все изображения:

Следующая функция покажет первую фотография и создаст несколько обработчиков событий:

Эта функция отвечает за вывод следующей или предыдущей фотографии:

Меняем размеры изображения и применяем их к размерам экрана:

Последняя функция даст нам размеры изображения и его правильное позиционирование:

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