Прежде всего, давайте обратим внимание на слайд-шоу в верхней части сайта Robot or Not (рис. 5.16). В настоящее время разметка выглядит следующим образом:
<div class="slides">
<div class="figure">
<b><img src="img/slide-robot.jpg" alt="" /></b>
<div class="figcaption">…</div>
</div><!– /end.figure – >
<ul class="slide-nav">
<li><a class="prev" href="#">Previous</a></li>
<li><a class="next" href="#">Next</a></li>
</ul>
</div><!– /end.slides – >
Совсем
не впечатляет, да? К тому же еще и не очень функционально: мы написали интерфейс для слайд-шоу, но он еще не работает. Мы включили в шаблон один слайд, а также навигацию «вперед/назад». Но нажатие на эти ссылки ни к чему не приводит.
То есть нужно включить немного JavaScript и придать нашему дизайну некоторую интерактивность. Но для начала нам нужны слайды! Так что давайте найдем еще пару изображений и допишем HTML:
<div class="slides">
<div class="figure">
<b><img src="img/slide-robot.jpg" alt="" /></b>
<div class="figcaption">…</div>
</div><!– /end.figure – >
<div class="figure">
<b><img src="img/slide-tin.jpg" alt="" /></b>
<div class="figcaption">…</div>
</div><!– /end.figure – >
<ul class="slide-nav">
<li><a class="prev" href="#">Previous</a></li>
<li><a class="next" href="#">Next</a></li>
</ul>
</div><!– /end.slides – >
Используя тот же самый модуль
.figure
, вставим еще четыре слайда.
Выглядит это, конечно, немного странно, поскольку все наши слайды накладываются друг на друга (рис. 5.17). Чтобы привести слайд-шоу в нормальное состояние, воспользуемся бесплатным jQuery-плагином, разработанным Мэтом Маркизом . Это один из самых функциональных скриптов слайд-шоу, которыми я когда-либо пользовался. К тому же он прекрасно обходится со слайдами, содержащими различное количество текста или изображений, без обращения к замысловатой CSS-мишуре. (Да, я сказал «мишуре», и я вполне серьезен.)
Рис. 5.17. Мы добавляем новые слайды и начинаем ненавидеть статичные картинки
Нашему скрипту "
карусели"
не хватает еще трех элементов
script
:
<script src="jquery.js"></script>
<script src="carousel.js"></script>
<script src="core.js"></script>
Поскольку
скрипт Мэтта требует запуска jQuery, я загрузил библиотеку си поместил ее в верхнюю часть страницы (
Ничего страшного, если вам не нравится JavaScript или вы прежде не использовали jQuery. Этот скрипт выполняет следующие действия.
1. Он располагает элемент
div.slides
внутри модуля
.welcome
при помощи CSS-ориентированного синтаксиса jQuery (
$(".welcome.slides")
).
2. Затем обрамляет контент необходимой разметкой (
.wrapInner(…)
)
3. Запускает функцию
.carousel
, создавая слайд-шоу. А поскольку мы присвоили отдельным слайдам класс
.figure
, мы дали указания скрипту их использовать.
Эти восемь строчек JavaScript дают нам в результате прекрасно работающее слайд-шоу (рис. 5.18). Ура!
Рис. 5.18. Нам удалось оживить слайд-шоу!
Загружаем контент не спеша, но с умом
По крайней мере, нам есть с чего начинать. Если мы в браузере отключим JavaScript, мы вернемся к тому, с чего начинали: слайды накладываются друг на друга, а меню навигации тут просто для красоты. То есть любой посетитель сайта, у которого нет доступа к JavaScript, получит невнятное и неправильное представление. Что ж, давайте решим эту проблему.
Для начала уберем навигацию «вперед/назад» из разметки и вставим ее через JavaScript:
Теперь код выглядит более сложным, но мы на самом деле ввели только одну новую часть функциональности. Прежде всего мы заявили переменную
sNav
, которая содержит HTML для навигации слайдов, и вставили ее перед функцией
carousel
. Благодаря тому, что мы использовали jQuery для вставки навигации в страницу, пользователи без JavaScript не смогут ее увидеть. Прогрессивное улучшение в действии.