Отзывчивый веб-дизайн

Выглядит это, конечно, немного странно, поскольку все наши слайды накладываются друг на друга (рис. 5.17). Чтобы привести слайд-шоу в нормальное состояние, воспользуемся бесплатным jQuery-плагином, разработанным Мэтом Маркизом . Это один из самых функциональных скриптов слайд-шоу, которыми я когда-либо пользовался. К тому же он прекрасно обходится со слайдами, содержащими различное количество текста или изображений, без обращения к замысловатой CSS-мишуре. (Да, я сказал «мишуре», и я вполне серьезен.)

^{Рис. 5.17. Мы добавляем новые слайды и начинаем ненавидеть статичные картинки}

Нашему скрипту "карусели" не хватает еще трех элементов script:

script src="jquery.js"/script

script src="carousel.js"/script

script src="core.js"/script

Поскольку скрипт Мэтта требует запуска jQuery, я загрузил библиотеку си поместил ее в верхнюю часть страницы (jquery.js), за которой следует скрипт Мэта (carousel.js) и файл core.js, где мы и напишем код для слайд-шоу.

Кстати, он совсем простой. Впишем в core.js следующие строчки:

$(document). ready(function {

$(".welcome.slides")

.wrapInner(‘div class="slidewrap"div id="welcome-slides" class="slider"/div/div’)

.find(".slidewrap")

.carousel({

slide: ‘.figure’

});

});

Ничего страшного, если вам не нравится JavaScript или вы прежде не использовали jQuery. Этот скрипт выполняет следующие действия.

1. Он располагает элемент div.slides внутри модуля .welcome при помощи CSS-ориентированного синтаксиса jQuery ($(".welcome.slides")).

2. Затем обрамляет контент необходимой разметкой (.wrapInner(…))

3. Запускает функцию .carousel, создавая слайд-шоу. А поскольку мы присвоили отдельным слайдам класс .figure, мы дали указания скрипту их использовать.

Эти восемь строчек JavaScript дают нам в результате прекрасно работающее слайд-шоу (рис. 5.18). Ура!

^{Рис. 5.18. Нам удалось оживить слайд-шоу!}

Загружаем контент не спеша, но с умом

По крайней мере, нам есть с чего начинать. Если мы в браузере отключим JavaScript, мы вернемся к тому, с чего начинали: слайды накладываются друг на друга, а меню навигации тут просто для красоты. То есть любой посетитель сайта, у которого нет доступа к JavaScript, получит невнятное и неправильное представление. Что ж, давайте решим эту проблему.

Для начала уберем навигацию «вперед/назад» из разметки и вставим ее через JavaScript:

$(document). ready(function {

var sNav = [

‘lia class="prev" href="#welcome-slides"Previous/a/li’,

‘lia class="next" href="#welcome-slides" Next/a/li’,

‘/ul’

].join("");

$(".welcome.slides")

.wrapInner(‘div class="slidewrap"div id="welcome-slides" class="slider"/div/div’)

.find(".slidewrap")

.append(sNav)

.carousel({

slide: ‘.figure’

});

});

Теперь код выглядит более сложным, но мы на самом деле ввели только одну новую часть функциональности. Прежде всего мы заявили переменную sNav, которая содержит HTML для навигации слайдов, и вставили ее перед функцией carousel. Благодаря тому, что мы использовали jQuery для вставки навигации в страницу, пользователи без JavaScript не смогут ее увидеть. Прогрессивное улучшение в действии.

Но это не решает проблему накладывания слайдов один на другой. И здесь мы немного схитрим: мы уберем со страницы все слайды, кроме одного, и переместим их в отдельный HTML-файл. Теперь основа нашей страницы выглядит значительно легче:

div class="slides"

div class="figure"

bimg src="img/slide-robot.jpg" alt="" //b

div class="figcaption"…/div

/div!– /end.figure –

/div!– /end.slides –

Но мы создали отдельный файл (давайте назовем его slides.html) и вставили в него разметку для четырех оставшихся слайдов.

div class="figure"

bimg src="img/slide-tin.jpg" alt="" //b

div class="figcaption"…/div

/div!– /end.figure –

div class="figure"

bimg src="img/slide-statue.jpg" alt="" //b

div class="figcaption"…/div

…

/div!– /end.figure –