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

При последующем нажатии кнопки мыши на пункте происходит вывод дополнительного содержания (описание изображения). Структура кода HTML состоит из основного контейнера с классом wd-wrapper. В демонстрации он позиционируется абсолютно, поэтому мы его можем растянуть над страницей с помощью свойств left/right/top/bottom без определения  высоты и ширины.

Но он может иметь и относительное позиционирование с заданными высотой и шириной. Кривая синусоиды автоматически подстраивается под высоту контейнера. В демонстрации можно наблюдать перестройку кривой при изменении размеров окна. Для начала мы создаем довольно простую HTML— разметку:

Элемент с классом wd-info-title выводится для изображения в режиме среднего масштабирования:

В данном режиме также есть кнопка уменьшения масштаба, которая позволяет вернуться в режим меленьких миниатюр. При нажатии на миниатюре среднего размера открывается окно для вывода дополнительного содержания. Теперь рассмотрим стилизацию, которая осуществляется с помощью CSS:

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

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