Loading





Форекс с Альпари

eTXT




Анкетка


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

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

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


Демо-пример



Исходники (386 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

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

После скачивания, распакуйте архив в отдельную папку на компьютере и ознакомьтесь с её содержимым. В папке 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>  


В рассматриваемом примере библиотека jQuery (jquery.min.js) подключается локально. Вы вправе использовать другие варианты подключения. Об этом прочтите здесь.

меткаВ раздел 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.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка