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

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

Для достижения данного эффекта нам понадобится еще небольшой плагин 2D Transform для анимации вращения. Красивые фотографии, используемые в демо, это работы талантливого художника TetsumoПосетить его блог здесь. И так, приступим.

Шаг 1. HTML

Начнем с разметки. Мы рассмотрим всю нашу разметку HTML. В которой содержатся DIV с классом «pp_gallery». Он будет состоять из подгрузки  навигации, которая будет отображаться при полном просмотре изображения  и контейнера миниатюр.

Внутри контейнера миниатюр, которые будут иметь класс «pp_thumbContainer», мы будем включать несколько DIV для альбомов и функций для возвращения в режим просмотра альбома.

Динамическая структура для полного просмотра изображений будет следующей:

С разметкой закончили, переходи к следующему шагу.

Галерея с фотопанелью для сайта при помощи jQuery RUDEBOX

Шаг 2. CSS

Начнем мы с общих параметров сброса некоторых общих стилей для документа:

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

Альбомы скрыты изначально. При загрузке страницы, они будут находится в низу, поэтому мы установим начальное значение до -90 пикселей:

Создаем описание альбома и задней подложки изображений будут иметь следующие стили:

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

Миниатюры будут обведены белой рамкой и иметь небольшие тени:

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

Со стилями мы разобрались, теперь давайте добавим немного магии!

Шаг 3. JavaScript

Давайте начнем с определения исходных переменных. Во-первых, мы хотим знать, если мы имеем дело с Internet Explorer, то мы не будем использовать полное вращение изображений (это позволит убрать некоторые ошибки с анимацией):

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

Мы хотим развернуть альбомы равномерно по всей страницы, так что мы будем вычислять дистанцию по крайнему значению:

SpreadPictures — функция, которая будет делать нечто подобное: она будет двигаться выбранным альбом влево и размещать все эскизы:

Следующая функция, называемая ShowImage ,  она будет отображать полные изображение, перемещая их снизу. Для центрирования предварительного просмотра, мы должны установить свои отрицательные поля в зависимости от ширины и высоты изображения. Мы также будем случайным образом вращать изображение:

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

Функция hideCurrentPicture сделает вращение слайда вверх. Мы не будем использовать любые анимации вращения, если браузер IE:

При наведении на миниатюру, мы хотим, чтобы она двигалась немного вверх, и слегка поворачивалась:

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

Вот и все. Готово!

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