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
• Создание видео из фотографий в программе ФотоШОУ
• Создание слайд-шоу для сайта
Cлайд-шоу для презентаций
При создании сайта часто возникает необходимость сделать презентацию товаров или услуг. Для этого обычно используют слайдеры на основе бесплатной библиотеки jQuery. В интернете можно найти сотни самых разнообразных проектов (плагинов), но всегда хочется чего-нибудь оригинального и простого в установке. Одним из самых удачных, на мой взгляд, является плагин jQuery-слайд-шоу Skitter, созданный португальским веб-дизайнером Thiago S.F.
Этот слайдер наиболее подходит именно для презентаций в интернет-магазине, хотя при желании его можно использовать для оформления шапки сайта. В Skitter можно выбрать четыре темы оформления и более 20 красивых переходов между слайдами (эффекты анимации при переходах от одного слайда к другому). Вид перехода можно установить общий для всех слайдов, включая случайный выбор, или задавать для каждой смены картинок.
Действующий пример работы Skitter с установкой темы "clean" и выбором переходов "random" (случайный) показан на рисунке:
|
Другой пример - слайдер Skitter с установкой темы "square", переходом "blink" вручную по кнопкам вперед/назад, скрытием надписей и кнопок выбора слайдов:
|
Установка слайдера Skitter
Как всегда, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, естественно, skitter. Затем надо скачать архив и распаковать его в созданную папку. Мы получим в ней три вложенных папки: скрипты js, стили CSS и папку images с вспомогательными картинками.
Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к скриптам и файлу CSS, небольшой javascript инициализации слайд-шоу (с установками для первого примера) и простое правило CSS для задания размеров слайдера (совпадают с размером изображений слайд-шоу):
<link href="skitter/css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="skitter/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="skitter/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="skitter/js/jquery.skitter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box_skitter').skitter({
theme: 'clean', //Темы слайд-шоу - minimalist, round, clean, square
progressbar: true, //Вывод индикатора загрузки true/false
dots: true, //Вывод кнопок выбора слайдов true/false
numbers_align: 'center', //Положение кнопок выбора слайдов center/right/left
preview: true, //Вывод миниатюр-превьюшек true/false
animation: 'random', //Вид переходов (случайный, полный перечень см. ниже)
auto_play: true, //Автоматический запуск слайд-шоу true/false
hideTools: false, //Скрытие кнопок навигации true/false
label: true //Вывод надписей true/false
});
});
</script>
<style type="text/css">
.box_skitter {
position: relative;
width: 500px; /*Задать размеры изображений*/
height: 250px;
background: #ccc; /*Фон слайдера*/
}
</style>
Далее, размещаем изображения будущего слайд-шоу с надписями на странице сайта в виде неупорядоченного списка внутри тега <div class="box_skitter box_skitter">...<div>. Естественно, все изображения должны иметь одинаковый размер:
<div class="box_skitter box_skitter">
<ul>
<li><img src="image_01.jpg" width="500" height="250"/>
<div class="label_text">
<p>Автомобиль</p>
</div>
</li>
<li><img src="image_02.jpg" width="500" height="250" />
<div class="label_text">
<p>Большая цистерна</p>
</div>
</li>
<li><img src="image_03.jpg" width="500" height="250" />
<div class="label_text">
<p>Полевая кухня</p>
</div>
</li>
<li><img src="image_04.jpg" width="500" height="250" />
<div class="label_text">
<p>Маленькая цистерна</p>
</div>
</li>
</ul>
</div>
И наконец, необходимо указать в размещенных вверху правилах CSS ширину и высоту наших изображений:
width: 500, // ширина слайдера/изображений
height: 250, // высота слайдера/изображений.
На этом создание слайд-шоу закончено, и вы можете похвалить себя любимого за проделанную работу, открыв страницу со слайд-шоу в браузере.
Настройка параметров слайд-шоу Skitter
Несмотря на простоту установки, слайдер Skitter позволяет менять множество параметров. Как говорилось выше, в нём можно выбрать четыре темы оформления и более 20 красивых переходов между слайдами. Таким образом, вы легко можете подстроить внешний вид слайдера под дизайн вашего сайта.
Для большинства применений достаточно настроек, которые указаны в нашем скрипте инициализации с русскими комментариями. Для, так называемых, продвинутых пользователей можно заняться экспериментами с настройками, которые находятся в файле skitter.styles.css (в нём также сделаны комментарии на русском языке) и в скрипте jquery.skitter.js. Последний необходимо открыть в редакторе или в Блокноте и в самом верху вы увидите перечень параметров. Их более пятидесяти (!), что говорит о серьезной работе, проделанной разработчиком плагина, и не может не радовать. Переводить их я не стал. Во-первых, они достаточно простые, во-вторых, вы всегда можете воспользоваться словарем (например, Гуглом), а в-третьих, подробное описание с примерами содержится на соответствующей странице сайта разработчика.
К примеру, приведу лишь перечень переходов между слайдами, доступных в плагине Skitter:
cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
21.07.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru