www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Choko-slider - простое слайд-шоу для сайта
Choko-slider (Шоколадный слайдер) - упрощенный вариант рассмотренного ранее слайдера Coin Slider. Этот вариант удобнее интегрировать в структуру сайта, в нем проще и корректнее реализован вывод надписей для изображений, есть возможность менять вид кнопок навигации, а также уменьшен размер самого скрипта. Разработчик этого слайдера Алан Давидович (Alan G. Dawidowicz), веб-дизайнер из Буэнос-Айреса, Аргентина.
Choko-slider - бесплатный плагин библиотеки jQuery, работает с браузерами Firefox 2+, IE 6+, Safari v4, Google Chrome 3+ и Opera 9+. Его описание можно посмотреть на соответствующей странице авторского сайта.
Действующий пример работы этого плагина c двумя видами переходов показан на рисунке. Смена изображений выполняется автоматически или кнопками. Первые два изображения выводятся с надписями.
    |
Установка слайдера Choko-slider
Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, естественно, chokoslider. Затем надо скачать архив и распаковать его в созданную папку. Мы получим в ней два скрипта (jquery-1.4.4.min.js и jquery.chocoslider.js), таблицу стилей chocoslider.css и файл изображения кнопки ручного перехода по картинкам. Обратите внимание, что с более поздними версиями jQuery, чем jquery-1.4.4, этот плагин работает некорректно.
Далее, в заголовок страницы внутри тега <head>...</head> вставляем следующие строчки, где указан путь к нашим скриптам и правилам CSS, а также небольшой javascript для инициализации слайд-шоу:
<link rel="stylesheet" href="chocoslider/chocoslider.css" type="text/css" />
<script type="text/javascript" src="chocoslider/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="chocoslider/jquery.chocoslider.js"></script>
<script type="text/javascript">
$(window).ready(function() {
$('#slider').chocoslider();
});
</script>
Изображения для будущего слайд-шоу размещаем в теге <div id="slider">, а надписи в атрибуте title.
<div id="slider">
<img src="images_01.jpg" alt="" title="Надпись 1"/>
<img src="images_02.jpg" alt="" title="Надпись 2"/>
<img src="images_03.jpg" alt="" />
<img src="images_04.jpg" alt="" />
</div>
Также необходимо указать размеры окна слайд-шоу в CSS файле chocoslider.css. Обычно его размеры совпадают с длиной и шириной изображений. Если необходимо, то любая картинка может быть обычной гиперссылкой.
На этом установка Choko-slider закончена, и вы можете полюбоваться на созданное слайд-шоу, открыв страницу в браузере.
Настройка параметров слайдера Choko-slider
Настройка внешнего вида слайд-шоу выполняется простыми правилами CSS (файл chocoslider.css), а параметры смены картинок задаются в файле jquery.chocoslider.js. Все настройки находятся в самом конце этого файла и снабжены русскими комментариями. Изменяя их, вы легко сможете изменять вывод слайд-шоу:
auto:false, //смена изображений: true - только кликом по кнопкам, false - автоматическая смена (слайд-шоу)
autoPause:true, //остановка слайд-шоу при наведении мыши на картинки, false - запрет
speedStrip:800, //длительность перехода между кадрами
effect:'random', //выбор эффекта переходов effect1 (верт. полосы), effect2 (растворение) или random (случайный)
numberStrips:15, //количество полос разбивки изображения при переходе effect1
sliderDelay:3000, //длительность одного кадра
transparencytitle:0.5, //прозрачность полосы с титрами
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:true //вывод панели с кнопками, false - запрет
Если вам необходимо создать разные варианты слайд-шоу для отдельных страниц сайта, то можно задавать параметры слайдера на каждой из них. Для этого достаточно ввести настройки в скрипт инициализации, который мы разместили в теге <head>...</head>. Конечно, необязательно указывать каждый раз все параметры, а только те, которые надо переустановить:
<script type="text/javascript">
$(window).ready(function() {
$('#slider').chocoslider({
auto:false, //смена изображений: true - только кликом по кнопкам, false - автоматическая смена (слайд-шоу)
autoPause:true, //остановка слайд-шоу при наведении мыши на картинки, false - запрет
speedStrip:800, //длительность перехода между кадрами
effect:'random', //выбор эффекта переходов effect1 (верт. полосы), effect2 (растворение) или random (случайный)
numberStrips:25, //количество полос разбивки изображения при переходе effect1
sliderDelay:3000, //длительность одного кадра
transparencytitle:0.5, //прозрачность полосы с титрами
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:true //вывод панели с кнопками, false - запрет);
});
});
</script>
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
30.01.2014 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru