Слайд-галерея с эффектом смены изображений

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

И снова, здравствуйте! Друзья, в этот раз хочу предложить Вам очередной небольшой и простой урок по показу изображений. Этот вариант я нашел на сайте санатория МО «Звенигородский», когда заказывал путёвку. Вариант мне понравился и я решил представить его на своём сайте.

Если вам по душе такой вариант, продолжим изучать материал.

После скачивания, распакуйте архив в отдельную папку на компьютере и ознакомьтесь с её содержимым. В папке nivoslider должны быть три папки - css, img и js. Это, соответственно, папки с файлами стилей, изображений и ява-скриптов. Также здесь находится файл demo.html.

Откройте файл demo.html в вашем браузере и проверьте работу скрипта.

Установка на страницу сайта

1. Начните с подбора необходимых изображений, которые должны находиться в папке img. Картинки должны быть с одинаковыми размерами. В демо-примере размеры 920x360px.

2. Закачайте содержимое папок img, css и js в соответствующие папки сайта на сервер.

3. На страницу сайта (в данном примере - она в корне сайта), где планируете разместить слайд-галерею необходимо установить коды из файла demo.html:

В разделе head нужно сделать ссылку на файл стилей, которая выглядит так:

<link rel="stylesheet" href="css/nivoslider.css" type="text/css">

где css/nivoslider.css есть путь к файлу стилей. Если у вас уже есть файл стилей, можно просто добавить к вашему файлу стилей содержимое файла nivoslider.css. Надеюсь, это сделать несложно.

Этот код также поместите в раздел head:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
     jQuery.noConflict();
</script>  

В раздел body вставьте нижеприведенный код:

<script type="text/javascript" src="js/jquery01.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
		effect:'sliceUpDownLeft', //sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random
		slices: 15,
		animSpeed: 500,
		pauseTime: 3000,
		directionNav: true,    //Следующий и предыдущий
		directionNavHide: false,    //Показать только при наведении курсора мыши
		controlNav:true,    //1,2,3...
		pauseOnHover: true,    //Остановить анимацию при наведении
		manualAdvance: false,    //Принудительно ручные переходы
		beforeChange: function(){},
		afterChange: function(){}
	});
});
</script>

Пояснения:

         Изменяемые параметры. (В переводе false - ложь, true - правда).

И, наконец, нижеприведенный код вставьте также в раздел body:

<div id="slider">
<img src="img/slide100.jpg" alt="" width="920" height="360">
<img src="img/slide200.jpg" alt="" width="920" height="360">
<img src="img/slide300.jpg" alt="" width="920" height="360">
<img src="img/slide400.jpg" alt="" width="920" height="360">
</div>

Пояснения:

         Ваши файлы изображений.

Вот и весь несложный урок. Благодарю за внимание. Посещайте мой сайт. Всех благ! L.M.