По крайней мере, нам есть с чего начинать. Если мы в браузере отключим JavaScript, мы вернемся к тому, с чего начинали: слайды накладываются друг на друга, а меню навигации тут просто для красоты. То есть любой посетитель сайта, у которого нет доступа к JavaScript, получит невнятное и неправильное представление. Что ж, давайте решим эту проблему.
Для начала уберем навигацию «вперед/назад» из разметки и вставим ее через JavaScript:
$(document). ready(function() {
var sNav = [
‘
‘
‘’
].join("");
$(".welcome.slides")
.wrapInner(‘’)
.find(".slidewrap")
.append(sNav)
.carousel({
slide: ‘.figure’
});
});
Теперь код выглядит более сложным, но мы на самом деле ввели только одну новую часть функциональности. Прежде всего мы заявили переменную sNav, которая содержит HTML для навигации слайдов, и вставили ее перед функцией carousel(). Благодаря тому, что мы использовали jQuery для вставки навигации в страницу, пользователи без JavaScript не смогут ее увидеть. Прогрессивное улучшение в действии.
Но это не решает проблему накладывания слайдов один на другой. И здесь мы немного схитрим: мы уберем со страницы все слайды, кроме одного, и переместим их в отдельный HTML-файл. Теперь основа нашей страницы выглядит значительно легче:
…
Но мы создали отдельный файл (давайте назовем его slides.html) и вставили в него разметку для четырех оставшихся слайдов.
…
…
…
Вы, вероятно, заметили, что slides.html – это даже не полноценный HTML-документ. Это на самом деле отрывок, мини-документ, в котором мы можем сохранить часть HTML-кода и использовать его позже. Фактически мы воспользуемся jQuery, чтобы открыть slides.html и загрузить изображения в слайд-шоу:
$(document). ready(function() {
$.get("slides.html", function(data) {
var sNav = [
‘
‘
‘
].join("");
$(".welcome.slides")
.append(data). wrapInner(‘’)
.find(".slidewrap")
.append(sNav)
.carousel({
slide: ‘.figure’
});
});
});
На этом ставим точку. Функция jQuery .get () открывает наш HTML-отрывок (slides.html) и вставляет его содержание в модуль при помощи append(). Если JavaScript недоступен или если jQuery не может загрузить этот файл, то пользователь увидит одну картинку в верхней части страницы: абсолютно приемлемый вариант для нашего дизайна (рис. 5.19).
Рис. 5.19. Нет JavaScript? Никаких проблем. Слайд-шоу сокращается до размеров одной картинки, которая все равно отлично выглядит
Наш простой скрипт пополнился кодом, но конечный результат выглядит более надежно и функционально. Мы не принимаем во внимание возможности браузера или устройства, отображающего нашу страницу: если JavaScript доступен, на экране появится слайд-шоу.
Но нет предела совершенству, и этот небольшой черновой образец – не исключение. Например, мы могли бы сделать так, чтобы слайд-шоу появлялось только на определенных типах экранов, то есть указать в скрипте определенные диапазоны разрешений. Так, если мы не хотим, чтобы оно отображалось на устройствах с маленькими экранами, мы могли бы вставить в скрипт простую проверку разрешения:
if (screen.width > 480) {)
$(document). ready(function({ … });
}
Этот оператор if выполняет те же функции, что медиазапрос min-width: 480px: если экран уже 480px, вложенный JavaScript не будет применяться (рис. 5.20).
Рис. 5.20. Мы решили, что слайд-шоу станет доступным только для браузеров с разрешением свыше 480px. На более мелких экранах будет видна одна-единственная картинка
