Чтение онлайн

Рис. 5.16. Слайд-шоу или, точнее, его подобие

Прежде всего, давайте обратим внимание на слайд-шоу в верхней части сайта Robot or Not (рис. 5.16). В настоящее время разметка выглядит следующим образом:

Совсем не впечатляет, да? К тому же еще и не очень функционально: мы написали интерфейс для слайд-шоу, но он еще не работает. Мы включили в шаблон один слайд, а также навигацию «вперед/назад». Но нажатие на эти ссылки ни к чему не приводит.

То есть нужно включить немного JavaScript и придать нашему дизайну некоторую интерактивность. Но для начала нам нужны слайды! Так что давайте найдем еще пару изображений и допишем HTML:

Используя тот же самый модуль

, вставим еще четыре слайда.

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

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

Нашему скрипту "

не хватает еще трех элементов :

Поскольку скрипт Мэтта требует запуска jQuery, я загрузил библиотеку си поместил ее в верхнюю часть страницы (

), за которой следует скрипт Мэта () и файл , где мы и напишем код для слайд-шоу.

Кстати, он совсем простой. Впишем в

следующие строчки:

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

1. Он располагает элемент

внутри модуля при помощи CSS-ориентированного синтаксиса jQuery ().

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

)

3. Запускает функцию

, создавая слайд-шоу. А поскольку мы присвоили отдельным слайдам класс , мы дали указания скрипту их использовать.

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

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

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

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

Теперь код выглядит более сложным, но мы на самом деле ввели только одну новую часть функциональности. Прежде всего мы заявили переменную

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