СЛАЙД-ШОУ

Слайд-шоу для сайта

Создать и добавить на сайт слайд-шоу обязательно должен уметь каждый веб-мастер. Использование слайдеров чрезвычайно популярно, и их можно встретить, практически, на любом современном ресурсе.

И это не случайно!

Если Вы были на странице "Анимация", то видели там работу GIF-анимации.
Здорово, конечно! И создаётся довольно просто - в фотошоп. Только у неё есть существенный недостаток, который очень ограничивает её применение на сайтах. Малоцветность.

Такого недостатка полностью лишено слайд-шоу!

Именно поэтому, для размещения на сайте различных многоцветных рисунков, фотографий, лучше всего воспользоваться не анимацией, а слайд-шоу.

Только в этом случае, применения столь любезных моему сердцу простых HTML+CSS, уже будет недостаточно. Нужно подключать скрипты ... ... !

Создание слайд-шоу на сайте

Самое оптимальное решение - использовать jQuery.
На страницах БОЛЬШОГО СДВОЕННОГО раздела, посвящённого этой замечательной технологии: "jQuery", есть много примеров её использования. Не буду повторяться.

Здесь применил jQuery для создания слайд-шоу на своём сайте, или, так называемого, слайдера. Его работу Вы видите сейчас ниже, а под ним подробно написал, что делал для создания такого вида слайдера, и показал ещё 7(!) действующих слайдеров.

Как видите, этот слайдер работает исправно! Впрочем, и все остальные тоже. Можете сами убедиться. => смотреть сразу

**Примечание. В отличие от других страниц раздела jQuery, нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
Кроме того, что очень важно(!), они работают у меня от другой версии jQuery, более поздней, чем использую здесь.

Если там использую версию jquery v.1.10.1.min, то здесь v.1.8.3.min

Однако, подробнее об этом и обо всём остальном, по-порядку - дальше.

Подготовка слайд-шоу

Работа по созданию и установке слайд-шоу на сайте обычно состоит из 4-ёх основных этапов.

Подготовка изображений для слайдера

1. Подобрал фотографии. Главное - чтобы они были обязательно одного размера. Нужно их тщательно измерить.
В данном случае, взял готовые картинки из дополнительных материалов, приложенных к обучающему курсу. Какому? Об этом здесь: "Ссылки" (откроется в новом окне).

2. Нарисовал в фотошоп графическое изображение слайдера в стиле "телевизор". Пусть не оригинально, зато очень удобно.
Главное - размер просмотровой зоны нужен немного больше по ширине и высоте, чем у подготовленных рисунков.

Создание HTML+CSS каркаса для слайд-шоу

Картинки прописываются в HTML-коде именно в то место, где они в дальнейшем будут выводиться. Срипты же, можно прописать потом в любое удобное место. Я обычно оставляю место для них сразу под рисунками. Структура логичнее.

Разместил сами изображения внутри тэга p, для которого установил в стилях CSS ширину и высоту, и указал его class="slideshow". А сам абзац с ними поместил внутрь общего тэга div, на фон которого повесил подготовленное графическое изображение слайдера (телевизор*). Ему дал class="slider_fon".
Причём, только для него, чтоб разгрузить страницу, подключил внешнюю таблицу стилей, а для рисунков всё делал внутри HTML-кода.

   P.S.** Последнее действие вовсе НЕ обязательно. Просто, мне так удобнее. Структура страницы логичнее как-то выглядит.

В правилах CSS указал размер окна для изображений, которые потом будут появляться в слайдере (width - height). Естественно, у всех изображений должен быть одинаковый размер.
При желании, мог расширить CSS-параметры, добавив, скажем, рамки, фон, отступы и прочие элементы. Однако, думаю, это уже было бы лишним.

Если же, всё-таки, Вам захочется так сделать, то, размеры указывайте ОБЩИЕ, то есть: изображение + ВСЕ установленные отступы и границы.

Подключение скриптов

Рекомендую посетить справочную страницу, которую делал для себя во время изучения технологии jQuery. Очень поможет Вам разобраться.
Открыл к ней общий доступ: "ВЫБОРКА в jQuery" (откроется в новом окне).

* * *

Как всегда, сначала создал папку js на сайте. Затем скачал нужные скрипты для слайд-шоу (архив), и распаковал его в эту папку. В ней получилось два файла скриптов: ядро jquery-1.8.3.min.js и плагин jquery.cycle.all.min.js.

В неё же, на всякий случай, добавил и свой управляющий файл myscripts11.js. Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.
Но ... ..., пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, "... наш бронепоезд всегда на запасном пути".

Дальше. Внутрь тэга <head> ... </head> вставил строчки, где прописал пути к скриптам. У меня они: <script src="js/jquery-1.8.3.min.js"  type="text/javascript"></script>, и к плагину: <script src="js/jquery.cycle.all.min.js"  type="text/javascript"></script>.
Свой ("запасной") управляющий файл закомментировал.

- и последнее -

Зашедшие на мой сайт с отключённым в браузере интерпретатором JavaScript, наблюдать слайд-шоу, разумеется, не смогут.
Они увидят рисунки так, как те прописаны в HTML-коде, т.е. в столбик, друг за другом.
Для них сделал строчку-предупреждение и вставил её в тэг <noscript> ... <noscript>.

Ну вот! Слайд-шоу создано. Осталось настроить его параметры: скорость смены рисунков, способы их показа, и т.д..

Настройка параметров слайд-шоу

Как уже писал выше, (в примечании**), нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
В созданном у себя на сайте слайд-шоу, применил настройки "по умолчанию".

Вообще же, легко установить различные, интересные типы переходов между картинками, изменяя javascript, размещённый в теле страницы.
Скажем, изменив в скрипте строчку sync: false на sync: true, можно убрать пробел при смене изображений.

Важное замечание!
Разные версии jQuery могут конфликтовать друг с другом, если они на одной странице.
Обязательно(!) проверяйте работу плагинов с установленной версией jQuery, поскольку не все версии сочетаются!

Пример**
На других страницах раздела jQuery, использующих библиотеку, установлена версия jquery v.1.10.1.min. Так вот, она более современная, чем v.1.8.3.min, от которой исправно(!) работают слайдеры слайд-шоу здесь.

НО!!!

Плагин jquery.cycle.all.min.js с ней НЕ РАБОТАЕТ!!!
(проверено)

* * *

Впрочем, не огорчайтесь. Всё в Ваших руках!
В разделе моего сайта "Полезное" (откроется в новом окне) найдёте испытанный(!) полный комплект нужных скриптов для создания такого слайд-шоу на своём сайте. (Разумеется, БЕСПЛАТНО!)

* * *

Дальше сможете посмотреть работу ещё 7-ми слайдеров, которые решил разместить на этой же самой странице ниже.

Другие виды слайд-шоу

Не буду в этом подразделе столь подробно описывать все действия по созданию слайд-шоу. В принципе, они абсолютно одинаковые.
Даже проще. Не нужно рисовать фоновую картинку слайдера в фотошоп. Даже отдельная таблица стилей CSS не понадобится.

Если хотите разместить различные варианты слайд-шоу на одной странице сайта, как я это сделал здесь (увидите ниже), указывайте разные классы для каждого варианта в строчке скрипта $('.slideshow').cycle({

    P.S.*  Не забудьте прописать в CSS размеры окна для каждого класса, если, всё же, будете использовать таблицу стилей. Мне она не понадобилась.

Посмотрите сначала на неподвижные рисунки, которые, аналогично, взял из обучающего курса (Какого? Повторю ссылку: "Ссылки"), и разместил их здесь для сравнения.

Вот они. Будущие участники 7-ми слайд-шоу!
Смотрите их "выступление" ниже.

Покажу несколько популярных видов слайдеров. Вставил их, для удобства просмотра, в общую таблицу.
Слева - название эффекта и краткое пояснение, если нужно. Справа - пример.

1. Растворение ( 'fade' ): Аналогичен верхнему примеру с мотоциклами.
2. Перетасовывание ( 'shuffle' ):
3. Зум ( 'zoom' ):
4. Переворот по осям ( 'curtainX' или Y ): Здесь установил 'curtainX'.
5. Сворачивание по вертикали ( 'turnDown' ): Здесь сворачивается вниз, а можно установить и другие виды переходов: turnUP,  Left,  Right.
6. Скроллинг ( 'scrollDown' ): Смещение. Здесь установил вниз, а кроме этого можно устанавливать: scrollUp,  Left,  Right.
7. Наплыв справа ( 'cover' ): В этом случае только справа. И здесь несколько иные параметры переходов: speed-скорость, timeout-задержка.

* * *

Надеюсь, показанное "групповое" слайд-шоу Вам понравилось.
Действительно, удобно! "Танцуют" домики - каждый в своей ячейке, и никому не мешают. Не зря я им +5 за "выступление" поставил!

А серьёзно - такой способ создания слайд-шоу для сайта экономит огромное количество места на странице.
Поэтому, повторю сказанное в начале раздела.
Самое оптимальное решение для создания разных шоу на сайте - использовать jQuery.

Посмотреть практическое применение слайдеров для дизайна страниц ресурса, можете на специально созданном мною сайте-визитке "Личная страничка".

Можно ли сделать что-либо подобное БЕЗ подключения скриптов?
Конечно можно! Об этом читайте дальше.

Слайд-шоу только на HTML

Как создать простой слайдер на сайте, чтобы НЕ применять разные сложные и тяжёлые (по "весу") скрипты?   Легко!
Не я был бы, если б не показал Вам такие интересные и простые способы!

Воспользуемся для этого базовыми технологиями интернета => HTML + CSS.

Базовые - означает такие, без которых интернет невозможен вообще, в принципе!

Впрочем, сначала посмотрите простые слайд-шоу, созданные только на языке HTML, без использования каких-либо скриптов.
Специально для этого сделал отдельную небольшую страницу.  

После уже сами сможете решить, что больше подходит Вашему ресурсу.

Заключение

Надеюсь, размещённая информация о том, как можно просто создать слайд-шоу для сайта, была Вам интересна.
Заодно, и для своего "Портфолио" разместил вполне достаточно материала по этой увлекательной теме.

Посетителям, кому нужно создать слайд-шоу, либо галерею на сайте, подключить аудио и видео к нёму, но нет времени самостоятельно заниматься этим, способен помочь раздел "Выбор исполнителя" (откроется в новом окне).

* * *

Сделал прямой заход на эту страницу из трёх БОЛЬШИХ разделов. Вернуться также можно прямо. Наведите курсор мыши на стрелки - появятся подсказки, куда они ведут.
Кликнув по верхнему логотипу, попадёте на "Главную".

ВВЕРХ