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

 

..они меняются создавая эффект перевертывания страниц. Для организации такой галереи мы будем использовать отличный плагин jQuery Booklet (автор Will Grauvogel). И так, для начала рассмотрим структуру кода HTML задается разметкой для плагина, которая должна включать элемент div сid “mybook”. Также мы добавим несколько навигационных элементов и индикатор загрузки:

Как вы заметили,что каждая страница записной книжки размещается внутри элемента div, который также помещен внутрь элемента div с классом “b-load”. Так как плагин позволяет использовать пользовательские кнопки для переворачивания страниц, то в конфигурации мы зададим использование наших ссылок со стрелками.

С разметкой мы закончили, теперь рассмотрим стили CSS, для начала нам задать обложку для плагина, то есть таблицу стилей, в которой будут переопределяться некоторые стили, которые идут вместе с плагином. Начнем адаптацию с класса “booklet” и определим для него тени и скругленные углы для рамки:

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

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

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

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

Абзацы и ссылки будут иметь следующие стили:

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

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

Индикатор загрузки имеет рамку со скругленными углами, и она полупрозрачная. Мы позиционируем его на правой стороне книги:

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

Также в структуре используется Cufon для вывода специфических шрифтов. Для него нужно добавить следующие строки  в раздел заголовка нашего кода HTML:

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