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
• Создание видео из фотографий в программе ФотоШОУ
• Создание слайд-шоу для сайта
Универсальный слайдер - bxSlider
При разработке сайта обычно требуется несколько плагинов jQuery, например, для создания слайд-шоу, карусели изображений, бегущей строки, слайдера и т.п. Между тем, есть замечательный универсальный плагин - bxSlider, который позволяет, меняя настройки, создавать не только эти эффекты, но и множество других. При этом bxSlider очень прост в установке и занимает не более 50 Кб. Разработчик этого плагина - веб-дизайнер из Чикаго Стивен Вандерски (Steven Wanderski). Полное описание слайдера bxSlider можно найти на его сайте jQuery Content Slider.
С помощью слайдера bxSlider мы получаем "в одном флаконе" разнообразные полезные решения для оформления сайтов, некоторые из которых показаны ниже:
1. Простой слайдер с выбором вида переходов, их скорости и времени демонстрации изображений. Для примера, выбран переход Растворение (Fade):
2. Универсальный слайдер с выводом надписей (1 и 2 слайды), HTML (5 слайд) и режимом слайд-шоу:
3. Карусель изображений с выбором направления смены слайдов - вверх/вниз и слева/направо:
4. Бегущая строка из изображений с выбором направления движения слайдов и ориентации (горизонтальная или вертикальная):
5. Слайдер из изображений разной высоты:
Установка слайдера bxSlider
Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, не мучаясь, bxslider. Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.bxslider.js, таблицу стилей jquery.bxslider.css и изображения кнопок вперед/назад.
Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к новым файлам и небольшой javascript для инициализации конкретного варианта слайдера (в данном случае, для показанного выше второго варианта):
<link rel="stylesheet" href="bxslider/jquery.bxslider.css"/>
<script src="bxslider/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="bxslider/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider_1').bxSlider({
mode: 'horizontal',
controls: true,
auto: true,
captions: true,
autoControls: true
});
});
</script>
Все изображения (или другой контент, например, iframe) будущего слайд-шоу помещаем на странице сайта в виде неупорядоченного списка в тег <ul class="bxslider_1" >...</ul>. Для корректной работы слайдера желательно указывать размеры изображений и другого контента. Ниже приведен HTML-код для второго примера (универсальный слайдер). Обратите внимание, что надписи для изображений необходимо указывать в атрибуте <title>:
<ul class="bxslider_1" >.
<li><img src="image_1.jpg" alt="Автомобиль" width="500" height="250" title="Автомобиль" /></li>
<li><img src="image_2.jpg" alt="Большая цистерна" width="500" height="250" title="Большая цистерна" /></li>
<li><img src="image_3.jpg" alt="Полевая кухня" width="500" height="250" /></li>
<li><img src="image_4.jpg" alt="Маленькая цистерна" width="500" height="250" /></li>
<li>
<iframe src="forma_01.html" width="500" height="250" scrolling="no" frameborder="0" ></iframe>
</li>
</ul>
Настройка параметров слайд-шоу bxSlider
Основные параметры bxSlider определены в самом начале файла jquery.bxslider.js и снабжены комментариями на русском языке. Вы можете их менять, открыв файл в редакторе или Блокноте. Для конкретного варианта слайдера параметры, заданные по умолчанию, можно переопределить либо в этом файле, либо в скрипте инициализации, размещенном нами в теге <head>...</head>.
Для показанных выше примеров параметры настроек следующие:
1. Простой слайдер:
$('.bxslider_0').bxSlider({
mode: 'fade',
controls: false,
auto: true,
speed: 1000,
pause: 3000,
pager: false,
autoControls: false
});
2. Универсальный слайдер:
$('.bxslider_1').bxSlider({
mode: 'horizontal',
controls: true,
auto: true,
captions: true,
autoControls: true
});
3. Карусель изображений
$('.bxslider_2').bxSlider({
slideWidth: 150,
mode: 'horizontal',
pager: false,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10
});
4. Бегущая строка:
$('.bxslider_3').bxSlider({
mode: 'horizontal',
autoDirection: 'next',
minSlides: 3,
maxSlides: 3,
slideWidth: 150,
slideMargin: 10,
ticker: true,
speed: 10000
});
5. Слайдер переменной высоты:
$('.bxslider_5').bxSlider({
adaptiveHeight: true,
mode: 'fade'
});
На этом установка слайдера bxSlider закончена, и вы можете посмотреть результат работы, открыв страницу в браузере.
Оформление слайдера можно менять обычными способами, в том числе и средствами CSS в файле jquery.bxslider.css.
Для многих применений (специально для ленивых!) вполне подойдут заданные по умолчанию "заводские настройки" слайдера bxSlider. В этом случае файл инициализации имеет следующий простой вид:
<script type="text/javascript">,
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
а сам слайдер выглядит в браузере следующим образом:
Кроме описанных вариантов, слайдер bxSlider позволяет создать фотогалерею с превьюшками картинок (миниатюрами), встроить видео в слайд-шоу и др., о чем подробно с примерами рассказано на сайте разработчика.
О других слайдерах, а также различных фотогалереях, каруселях изображений, календарях на сайте и прочих полезных веб-дизайнеру вещах смотрите в статьях о jQuery.
12.05.2015 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru