Выглядит это, конечно, немного странно, поскольку все наши слайды накладываются друг на друга (рис. 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 –
