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

 

  Как всегда, первым шагом является подключение скриптов, которые располагаются между тегами <head></hed>:

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

Теперь подключаем непосредственно сами изображения с помощью элемента <div class="panel">, и создаем подписи к ним:

Затем разметку изображений-миниатюр, и подписи к ним с помощью элемента title:

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

Читайте также: