www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Самое простое слайд-шоу для сайта
Simplest jQuery Slideshow - полностью оправдывает свое название самого простого слайд-шоу для сайтов. Этот слайдер, бесплатный плагин библиотеки скриптов jQuery, разработан в 2009 году канадским программистом Джонатаном Снуком (Jonathan Snook). Он содержит минимум настроек и легко устанавливается на странице сайта за пару минут.
Хотя в настоящее время разработано большое количество слайдеров с потрясающими воображение эффектами и переходами (сменой кадров), для многих применений не требуется множества функций и необходим простейший слайдер с универсальным переходом растворение (CrossFade).
Красивое решение этой задачи и предлагает Джонатан Снук. Его скрипт Simplest jQuery Slideshow, состоит всего из нескольких строк (!), но этого оказалось вполне достаточно.
Предлагаемый сценарий JavaScript выполняет следующие задачи:
1. Сначала выводится первое изображение, а все остальные скрываются (hide).
2. Затем реализуется переход к следующему изображению (next) через растворение (fadeIn/fadeOut).
3. По окончании перебора всех изображений осуществляется возврат к первому.
Скрипт выглядит следующим образом:
<script type="text/javascript">.
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function()
{$('.fadein :first-child').fadeOut(1000).next('img').fadeIn(1000)
.end().appendTo('.fadein');}, 3000);
});
</script>
Вот и всё! Действующий пример работы этого скрипта показан на рисунке:
Установка слайдера Simplest jQuery Slideshow
Для установки Simplest jQuery Slideshow необходимо вставить в заголовок страницы с будущим слайд-шоу внутрь тега <head>...</head> следующие строчки, указывающие путь к файлу jQuery, указанный выше скрипт и два правила CSS, определяющие параметры вывода изображений:
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function()
{$('.fadein :first-child').fadeOut(1000).next('img').fadeIn(1000)
.end().appendTo('.fadein');}, 3000);
});
</script>
<style type="text/css">
.fadein {
position:relative;
height:250px;
width:500px;
}
.fadein img {
position:absolute;
left:0;
top:0;
}
</style>
Если у вас на сайте не используются плагины библиотеки jQuery, то необходимо скачать любую её версию и разместить на сайте. Например, в данном примере используется версия jQuery-1.9.1.min.js. Скачать её можно здесь, а затем распаковать в любую папку на сайте (в нашем примере, папка scripts). Можно jQuery не загружать на сайт, а обращаться к внешнему ресурсу. В этом случае первую строчку показанного выше кода для слайдера следует заменить на такую:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Последняя операция - размещение на странице сайта необходимых изображений. Желательно, чтобы все они имели одинаковый размер, который надо указать в CSS вверху страницы, а сами изображения разместить в теге <div class="fadein">:
<div class="fadein">
<img src="images_01.jpg" alt="" />
<img src="images_02.jpg" alt="" />
<img src="images_03.jpg" alt="" />
<img src="images_04.jpg" alt="" />
</div>
На этом установка Simplest jQuery Slideshow закончена, и вы можете посмотреть созданное слайд-шоу, открыв страницу в браузере.
Настройка параметров слайдера Simplest jQuery Slideshow
Как говорилось выше, слайдер Simplest jQuery Slideshow не изобилует настройками и позволяет менять только длительность переходов и время показа слайдов. В нашем примере - длительность перехода 1000мс, а время показа каждого слайда - 3000 мс (см. числовые значения в скрипте).
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
26.01.2014 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru