www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Фотолаборатория

 Логотип Фото
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов

Обзор программ создания слайд-шоу

• Сравнение программ создания слайд-шоу
• Создание слайд-шоу Muvee
• Программа создания слайд-шоу MySlideShow Gold
• Программа создания слайд-шоу Photo2DVD Studio 3
• Программа создания слайд-шоу PhotoStage
• Slideshow Creator - отличная программа создания слайд-шоу
• Создание слайд-шоу в Windows Movie Maker
• Программа создания слайд-шоу Photo to VCD SVCD DVD
• Создание слайд-шоу в программе FastStone Image Viewer
• Новая версия программы создания слайд-шоу MySlideShow Gold (V3.1)
• Создание слайд-шоу в программе XnView
• Программа создания слайд-шоу SlideKS
• Подготовка музыкального сопровождения слайд-шоу
• Программа для обрезки аудиоклипов Free Audio Dub
• Слайд-шоу для презентаций. Программа Media Show XP
• Создание видео из фотографий в программе ФотоШОУ
• Создание слайд-шоу для сайта

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

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

Для этого воспользуемся плагином Slides, созданным программистом Натаном Салесом (Nathan Searles), техническим директором дизайн-студии "Бригада" ("The Brigade") в Портланде, штат Орегон, США. О другой его разработке рассказывалось в статье Фотогалерея для интернет магазина.

Плагин Slides - простой в установке, имеет несколько вариантов смены картинок в слайд-шоу и часто используется для шапки сайта. Пример работы этого слайдера с настройками по умолчанию показан на рисунке:

Установка слайд-шоу Slides

Как всегда, сначала создаем папку scripts на сайте. Затем надо скачать архив и распаковать его в созданную папку. В ней получится два скрипта jquery-1.8.3.min.js и jquery.cycle.all.min.js.

Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к скриптам и небольшой javascript, определяющий параметры слайд-шоу:
<script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
.slideshow {
width: 200px;
height: 135px;
margin: auto;
}
</style>

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

Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.

Последний шаг - размещение изображений на странице. Здесь также всё просто. Размещаете изображения внутри тега <div> или другого, для которого допустимо устанавливать ширину и высоту, и указываете его class="slideshow". Для нашего примера HTML-код слайдера выглядит следующим образом:
<div align="center" class="slideshow" >
<img src="images_01.jpg" alt="" width="500" height="250" />
<img src="images_02.jpg" alt="" width="500" height="250" />
<img src="images_03.jpg" alt="" width="500" height="250" />
<img src="images_04.jpg" alt="" width="500" height="250" />
</div>

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

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

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

Длительность показа изображений регулируется параметром timeout, а скорость - параметром speed. Для примера привожу несколько распространенных вариантов слайд-шоу и соответствующие им скрипты, которые следует вставить в заголовок страницы.

1. Растворение (наш пример):
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade', //вид перехода
speed: 1000, //скорость смены картинки
timeout: 1000 //длительность кадра
});
});
</script>
Слайд-шоуСлайд-шоуСлайд-шоуСлайд-шоуСлайд-шоу
2. Перетасовывание:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'shuffle',
sync: false,
speed: 500,
timeout: 5000
});
});
</script>
Слайд-шоуСлайд-шоуСлайд-шоуСлайд-шоуСлайд-шоу
3. Зум:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'zoom',
sync: false
});
});
</script>
Слайд-шоуСлайд-шоуСлайд-шоуСлайд-шоуСлайд-шоу
4. Переворот по оси X или Y:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'curtainX', // для поворота по оси Y - curtainY
sync: false
});
});
</script>
Слайд-шоуСлайд-шоуСлайд-шоуСлайд-шоуСлайд-шоу
5. Сворачивание по вертикали:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'turnDown', // направление можно задать turnUp, turnLeft, turnRight
sync: true
});
});
</script>
Слайд-шоуСлайд-шоуСлайд-шоуСлайд-шоуСлайд-шоу
6. Скроллинг (смещение):
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx:'scrollDown', // направление смещения можно задать scrollUp, scrollLeft, scrollRight
sync: true
});
});
</script>
Слайд-шоуСлайд-шоуСлайд-шоуСлайд-шоуСлайд-шоу
7. Наплыв справа:
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'cover
});
});
</script>
Слайд-шоуСлайд-шоуСлайд-шоуСлайд-шоуСлайд-шоу

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

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

Слайд-шоуСлайд-шоу
Слайд-шоуСлайд-шоу

Вариантов слайд-шоу плагинов для jQuery, а также самостоятельных разработок слайдеров огромное множество. В большинстве своём они легко устанавливаются на сайт аналогично тому, как показано в рассмотренном примере. Отличия могут быть в количестве необходимых скриптов и правил CSS. Некоторые интересные, на мой взгляд, варианты слайд-шоу, а также программы создания на сайте фотогалерей и каруселей изображений смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".

8.05.2013 г.

см. все статьи по веб-дизайну >>

Задать вопрос автору



Яндекс.Метрика
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: создание слайд-шоу для сайта, подготовка слайд-шоу, слайд-шоу jquery, слайд-шоу на сайте