Красивая слайд-шоу галерея в стиле 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. И которая может быть внедрена на любой сайт с помощью нескольких строчек кода.

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


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

  1. Добрый день!

    Начал ковырять это слайд-шоу, и возникли трудности. Хочу из него построить меню как тут www.apple.com/mac/ . Вот сделал набросок , залил туда 14 фоток, и хочу чтоб при нажатии на первую превьюшку отображались только Маки, на вторую только программы и на третью только аксессуары. Как правильно это сделать?

    Заранее спасибо.

    Thumb up 0 Thumb down 0

    • в каждый элемент DIV с классом slide выставляете 5 картинок

      будет примерно как на apple.com

      Thumb up 0 Thumb down 0

  2. Добрый день! Хорошая галерея получилась, все работает, но есть одно «но» — если полистать галерею вручную с помощью превью, дальше она сама не перелистывается, пока не перезагрузишь страничку. Если убрать строку

    if (!keepScroll) clearInterval (itvl);

    то неправильно перелистывает. Подскажите, как правильно решить эту проблему? Спасибо

    Thumb up 0 Thumb down 0

    • Нужно дописывать скрипт.

      Логика примерно такая. После ручного перелистывания ждем секунд 10 и снова запускаем автоперелистывание.

      Thumb up 0 Thumb down 0

  3. Добрый день!

    При добавлении данного слайдера возникает конфликт

    со стилем сайта, а именно тэг li теперь повторяется на сайте, по стилю слайдера,

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

    Thumb up 0 Thumb down 0

Оставить комментарий