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

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

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

Easy Slider - легкий слайдер

Выбирая вариант слайд-шоу для сайта, иногда стоит вспомнить старые, но отнюдь не плохие разработки. Одна из таких - простой и элегантный слайдер Easy Slider, вполне оправдывающий свое название "легкий". Этот плагин для jQuery создан в 2009 году, его автор Ален Гракалик (Alen Grakalic).

Слайдер имеет достаточное количество понятных настроек, и, что особенно важно для начинающих веб-дизайнеров, большинство параметров слайд-шоу легко меняются с помощью CSS. Два варианта слайд-шоу на основе Easy Slider показаны на рисунках:

Easy Slider позволяет выводить не только изображения, но и любой другой контент. Например, последний слайд в верхнем примере - вывод HTML-страницы тегом iframe.

Установка слайдера Easy Slider

Как всегда, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, для простоты, easyslider. Затем надо скачать архив и распаковать его в созданную папку. Мы получим в ней два скрипта jquery-1.4.3.min.js, easySlider1.7.js, таблицу стилей screen.css и два изображения кнопок вперед и назад.

Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к новым файлам и небольшой javascript для инициализации конкретного варианта слайд-шоу (в данном случае, для двух вариантов, показанных на рисунках):
<script type="text/javascript" src="easyslider/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="easyslider/easySlider1.7.js"></script> <link href="easyslider/screen.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: false, nextId: "slider1next", prevId: "slider1prev" }); $("#slider2").easySlider({ auto: true, numeric: true }); }); </script>

Для верхнего рисунка параметры слайд-шоу задаются идентификатором #slider, а для нижнего с кнопками выбора изображений - идентификатором #slider2.

Все картинки (или другой контент, например, iframe) будущего слайд-шоу помещаем на странице сайта в виде неупорядоченного списка в тег <div id="slider">...</div> для верхнего варианта и <div id="slider2">...</div> - для нижнего. В нашем примере нижнее слайд-шоу дополнительно снабжено двойной рамкой. Таким образом, HTML-код слайдера получается следующий:
<div id="content"> <div id="slider"> <ul> <li><img src="image1.jpg" alt="Автомобиль" width="500" height="250" /></li> <li><img src="image2.jpg" alt="Большая цистерна" width="500" height="250" /></li> <li><img src="image3.jpg" alt="Полевая кухня" width="500" height="250" /></li> <li><img src="image4.jpg" alt="Маленькая цистерна" width="500" height="250" /></li> <li> <iframe src="mess.html" scrolling="no" frameborder="0" width="500" height="250" ></iframe> </li> </ul> </div> <div> </div> <div id="slider2" style="border: thick #CC6633 double"> <ul> <li><img src="image1.jpg" alt="Автомобиль" width="500" height="250" /></li> <li><img src="image2.jpg" alt="Большая цистерна" width="500" height="250" /></li> <li><img src="image3.jpg" alt="Полевая кухня" width="500" height="250" /></li> <li><img src="image4.jpg" alt="Маленькая цистерна" width="500" height="250" /></li> </ul> </div> </div>

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

Размеры окна слайдера, положение кнопок и другие параметры оформления слайд-шоу задаются в файле стилей screen.css. Основные параметры снабжены русскими комментариями. Если вы хотите использовать другие кнопки переходов вперед/назад, то замените изображения своими, и не забудьте поменять их размеры в screen.css. Также любое изображение может быть ссылкой.

Общие параметры слайд-шоу определены в самом начале файла easySlider1.7.js и вы можете их менять. Для облегчения процесса основные пункты также снабжены комментариями на русском языке :
controlsShow: true, //вывод кнопок вперед/назад vertical: false, //вертикальная ориентация слайдера speed: 800, //скорость смены слайдов firstShow: true, //вывод кнопки В Начало lastShow: false, //вывод кнопки В Конец auto: true, //автоматическая прокрутка слайдов true/false pause: 2000, // пауза между сменой слайдов continuous: true, //true - непрерывная прокрутка, false - остановка на последнем кадре numeric: false //вывод номеров кадра внизу слайдера

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

О других слайдерах, а также различных фотогалереях, каруселях изображений, календарях на сайте и прочих полезных веб-дизайнеру вещах смотрите в статьях о jQuery.

25.07.2013 г.

Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru

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

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

Easy Slider - легкий слайдер

Установка слайдера Easy Slider

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

Ключевые слова: создание слайд-шоу для сайта, подготовка слайд-шоу, слайд-шоу jquery, слайд-шоу на сайте, слайдеры