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

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

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

Cлайд-шоу для сайта - Coin Slider

Один из важнейших параметров слайд-шоу для сайта - это количество и качество переходов: чем их больше и чем они эффектнее, тем лучше. В этом отношении интересен вариант слайдера Coin Slider, разработанного программистом из Словении Иваном Лазаревичем (Ivan Lazarevic).

Этот слайдер является плагином бесплатной библиотеки скриптов jQuery. Описание Coin Slider (на английском языке) с примерами можно посмотреть на соответствующей странице сайта разработчика. Этот плагин имеет небольшой размер (12 кБ), прост в установке и создает слайд-шоу с красивыми эффектами смены изображений, основанных на разбивке картинки на прямоугольники. Пример работы слайдера Coin Slider с настройками по умолчанию показан на рисунке.

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

Как всегда, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, естественно, coin_slider. Затем надо скачать архив и распаковать его в созданную папку. Мы получим в ней два скрипта jquery-1.9.1.min.js, coin-slider.js и таблицу стилей coin-slider-styles.css.

Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к скриптам, небольшой javascript для инициализации слайд-шоу и простое правило CSS для оформления надписей под картинками:
<script type="text/javascript" src="coin_slider/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="coin_slider/coin-slider.js"></script> <link rel="stylesheet" href="coin_slider/coin-slider-styles.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider(); }); </script> <style type="text/css"> .cs-title { width: 496px; /* ширина строчки с надписью */ padding: 2px; /* отступы надписи */ background-color: #333333; /* цвет фона */ color: #ffffff; /* цвет надписи */ } </style>

Далее размещаем изображения будущего слайд-шоу на странице сайта. Естественно, все изображения должны иметь одинаковый размер. Для примера с картинками-ссылками и надписью под изображениями HTML-код должен быть следующим:
<div id='coin-slider'> <a href="URL ссылки" ><img src="image_1.jpg" alt="" width=" " height=" " /><span>Текст надписи</span> </a> .............................. <a href="URL ссылки" ><img src="image_N.jpg" alt="" width=" " height=" " /><span>Текст надписи </span> </a> </div>

Далее необходимо согласовать размеры картинок с окном слайд-шоу. Для этого открываем файл coin-slider.js в редакторе или в Блокноте и в самом низу находим строчки настройки параметров ширины и высоты слайдера. Изменяем эти значения на размеры наших картинок.
width: 500, // ширина слайдера
height: 250, // высота слайдера.

Также необходимо задать ширину полосы с надписью под картинкой. Её указываем в размещенном нами ранее в теге <head>...</head> правиле CSS. Обратите внимание, что размер надо указывать с учетом отступов (padding).

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

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

В созданном слайд-шоу можно настраивать некоторые параметры. Все они также расположены в самом низу файла coin-slider.js и снабжены русскими комментариями, так что с ними можно легко поэкспериментировать:
width: 500, // ширина слайдера height: 250, // высота слайдера spw: 7, // число квадратов разбивки изображения по ширине sph: 4, // число квадратов разбивки изображения по высоте delay: 3000, // задержка между кадрами в мс sDelay: 70, // длительность переходов в мс opacity: 0.7, // прозрачность титров titleSpeed: 500, // скорость вывода надписи в мс effect: '', // вид перехода: random, swirl, rain, straight navigation: true, // вывод кнопок навигации links : true, // показывать картинки как ссылки hoverPause: true // пауза в слайд-шоу при наведении курсора на картинку

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

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

21.07.2013 г.

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

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

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

Cлайд-шоу для сайта - Coin Slider

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

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

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