Красивая слайд-шоу галерея в стиле Apple на CSS & jQuery

Когда речь идет о компании, которая собаку съела на дизайне, то вы скорее всего вспомните Apple. Просто посмотрите, как оформлены ее новые продукты, каталог, ее сайт — есть чем полюбоваться.

На этой неделе мы делаем красивую галерею слайд-шоу, похожую на ту, что Apple использует в своих сайтах для демонстрации своей продукции.

Создаем только клиентскую часть галереи, серверную часть трогать не будем.

Качаем пример и далее смотрим первый шаг.

Шаг 1 – XHTML

Для этой галереи ничего не нужно из PHP или баз данных. Это означает, что ее действительно легко внедрять в существующий сайт, вам всего лишь нужно изменить пару строчек HTML кода.

Давайте посмотрим на HTML разметку:

demo.html

Идея проста. Создаем два основных контейнера DIV. Один с id=”menu”, содержащим превью-картинки, второй с id=”slides”, содержащим сами слайды.

Чтобы добавить новый слайд, вы просто добавляете новый элемент в первый и второй контейнеры. Слайд в JPG формате, а превьюшки в прозрачном PNG, но вы можете использовать любое изображение нужного типа.

Вы даже можете поместить любой HTML код в каждый слайд. На пример, поставить гиперссылку, а в нее поместить изображение.

Тем не менее, важно помнить об атрибутах width и height при установки изображений для слайдов. Эти атрибуты используются в jQuery для определения ширины области слайдов.

Также обратите внимание на элементы LI в контейнере превьюшек. Первому пустому элементу назначено имя класса fbar, и он используется, как вертикальный разделитель, а остальным элементам назначено имя класса menuItem, и они используются, как кнопки управления слайд-шоу.

Теперь приступим к следующему шагу.

Шаг 2 – CSS

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

demo.css

Мы использовали следующий набор свойств CSS3 для слайд-шоу галереи:

• box-shadow — делает в галереи легкие тени по краям. При использовании, помните о смещении по осям X и Y (в примере, 0 0), размытии (в примере, 3px) и цвете тени;
• border-radius — закругляет нижние углы галереи.

К сожалению, сейчас эти свойства поддерживаются только в Safari, Chrome и Firefox. Однако в остальных браузерах галерея будет не такой красивой, но все же полностью функциональной.

А теперь немного jQuery магии.

Шаг 3 – jQuery

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

script.js

Основная идея этого скрипта в переборе всех слайдов, суммировании их ширины и присвоении этой суммы ширине контейнера DIV с id=”slides“. Поскольку у слайдов стоит свойство float равное left, то они стоят друг за другом.

Позже, когда вы щелкаете по превьюшке, скрипт вычисляет, какой слайд надо показывать и прокручивает DIV #slides, применяя на нем отрицательный margin с помощью метода animate. Такой эффект отлично смотрится на сайтах соцсетей, где много интересных картинок. Кстати, Создание социальной сети — вещь довольно забавная и в то же время сложная, и если вам нужен качественный веб-ресурс, то лучше довериться профессионалам.

Всего 40 строчек кода и слайд-шоу галерея в стиле Apple готова!

Выводы

В три простых шага мы сделали красивую слайд-шоу галерею, как у Apple. И которая может быть внедрена на любой сайт с помощью нескольких строчек кода.

Вы можете свободно модифицировать и развивать эту галерею в своих проектах. А если у вас возникли какие-то вопросы, то смело задавайте их, мы вам поможем.