В сентябре прошлого года я показал, как с помощью JavaScript можно представить XHTML документ в виде последовательности слайдов. По прошествии некоторого времени эта идея получила дальнейшее развитие. Участник форума AKS прислал свой вариант скрипта для слайд-шоу. Посмотрите, как изменилось представление документа, а ниже я попытаюсь описать что было сделано.
Как и в первом варианте, браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:
- ссылками вперед и назад
- общим количеством кадров и номером отображаемого слайда
- ссылками-оглавлением на все кадры презентации
- анимацией при смене слайдов
Это слайд-шоу можно использовать для представления небольшого сайта-визитки, вся информация которого может поместиться в одном html-документе.
Все изменения произведены только с файлом JavaScript. CSS и структура HTML-документа, из которого сделана презентация остались прежними. Я лишь немного изменил текст документа, сократил количество слайдов, убрал описание предыдущей версии. Так он будет выглядеть при отключенном JavaScript:
XHTML+CSS+DOM слайд-шоу 2
О чем эта статья?
Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.
Браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:
- ссылками вперед и назад
- общим количеством кадров и номером отображаемого слайда
- ссылками-оглавлением на все кадры презентации
- анимацией при смене слайдов
Что будем делать?
- Разобьем документ на отдельные слайды
- Покажем общее количество слайдов и номер слайда, отображаемого в настоящий момент
- Соорудим навигацию по слайдам типа «вперед-назад»
- Соберем заголовки слайдов и сделаем из них оглавление
Как построим XHTML-документ?
Для реализации нашего слайд-шоу разобьем документ на логически законченные блоки и заключим каждый в ...
Каждый слайд будем начинать с заголовка, заключенного в теги ...
Остальной XHTML-код в пределах слайда может быть произвольным, включая изображения, таблицы и т.п.
Что должно получиться?
XHTML-код документа должен получиться таким:
...
Заголовок слайда 1
... произвольный XHTML-код 1-го слайда
...
Заголовок слайда n
... произвольный XHTML-код n-го слайда
...
Для чего такая структура?
Зная, что каждый слайд заключен в ...
...
- легко подсчитать их количество и сделать панель навигации «следующий – предыдущий»;
- определить заголовки каждого блока и сделать из них оглавление.
Можно ли добавить таблицу?
|
IE6 |
Opera8 |
FF1.5 |
| HTML |
+ |
+ |
+ |
| CSS |
+ |
+ |
+ |
| DOM |
+ |
+ |
+ |
Конечно!
? не только таблицу!
Можно использовать практически любые теги для разметки внутри слайдов. Важно лишь соблюдать правила разметки и корректно закрывать теги.
Что сделаем с помощью JavaScript?
- Проверим, поддерживаются ли методы DOM браузером.
- Найдем в документе все
...
- Переберем слайды:
- выберем в них заголовки
...
- создадим ссылки типа «вперед-назад»
- Сделаем панель навигации по слайдам
- Сделаем оглавление слайдов для быстрого перехода к любому из них
Что еще можно сделать?
Можно взять архив с этим примером и исследовать JavaScript, в котором очень подробно описаны все действия по созданию элементов навигации и управлению слайдами.
Можно попытаться оптимизировать код JavaScript или добавить что-то новое.
Можно задать любой вопрос по работе этого примера или оставить комментарий.
Можно написать свой вариант скрипта и продемонстрировать его работу посетителям сайта.
Обсуждение слайд-шоу в нашем форуме.
Этот пример с описанием его работы прислан автором для размещения на hotibo.ru. Подробнее...
Очень изящно реализовано, спасибо!
В Файрфоксе все прекрасно, а IE появляется горизонтальная и вертикальная прокрутка, надо посмотреть размеры слоев локально, где-то всплыли неучтенные края
2006-02-27 at 11:30 pm
Пункты выпадающего меню не видны в FF 1.5, пока на них не наведешь курсор.
2006-02-28 at 12:23 pm
Да, было дело в css. Теперь в в FF 1.5 видно меню
2006-02-28 at 12:37 pm
“IE появляется горизонтальная и вертикальная прокрутка”
это у Вас в кэше старый css, сейчас такого не должно уже быть
размеры немного изменены.
2006-02-28 at 12:43 pm
жесть
2006-03-01 at 8:57 am
Вертикальная прокрутка попрежнему видна, но мне это нисколечко не мешает. Велеколепная работа! Правда, есть смешные детали, например “вперёд” до кнопки “назад”;+)))
2006-03-29 at 12:04 am
Хорошо сделано. Молодцы.
2006-03-29 at 8:07 am
хм… очень интересный пример, а возможно ли сделать чтобы контент загружался, когда мы выбираем слайд? Т.е. не все слайды сразу, а например сделать на большом сайте переход по страницам, с такой динамикой?
2006-04-07 at 6:57 pm
[b]2 liven[/b]
С одной стороны – есть всякие HttpRequest’ы, и, следовательно, как-то Вашу идею реализовать можно.
С другой стороны – было бы можно сделать что-либо подобное в удовлетворительном виде, тогда сеть просто уже кишела бы подобными реализациями…
2006-04-09 at 9:27 pm
to AKS
Ну, может сеть и не кипить. А мы этот вариант взяли на вооружение.
Тут же всё просто! Остальное зависит от вашей фантазии :)
2006-06-21 at 5:20 am
2Serge
Вы меня, наверно, неправильно поняли. Когда я написал “если было бы можно сделать что-то подобное…”, я имел ввиду то, о чем спрашивал liven, т.е. что-то, типа AJAX (подгрузка в выезжающий слайд контента с сервера).
2006-06-21 at 2:12 pm
вкусно, почти как орбит “флеш” ^_^
по поводу подгрузки контента – можно попробовать двигать object в который грузить контент…
2007-02-23 at 2:14 am
Хе-хе)) можно вкрутить добавление ilayer’ов (чтоб флэшь не перекрывал) и организовать ЖЖ таким образом))))
При парсинге добавлять в слои-страницы классы, и положить на это цсс (сделать в стиле фэнтэзи или фоллаута)
да-ммм.. фантазия у меня хорошая.
2007-03-16 at 5:29 am
В IE при отключеной яве контент выводится только по табличку, дальше – нет. ? появляется горизонтальный сколлбар (из-за какого-то внутреннего скроллбара, который хз для чего нужен). Ахтунг 8-0
А так – сууупер! Если бы ещё эти ошибки исправить, была бы вообще красота.
Спасибо!
2007-03-21 at 5:56 pm
А что может сказать про выпадающее меню для IE 7.0?
Там выпадающее меню скрывается при наведении на ссылку, т.е. он воспринимает наведение курсора на ссылку внутри дива как событие onmouseout.
Нашёл на форуме скрипт, но он не помог.
2007-08-21 at 1:10 pm