Плагин слайдера изображений на jQuery 


Плагин слайдера изображений на jQuery

Опубликовано

Плагин слайдера изображений на jQuery

Плагин слайдера на jQuery, очень прост в установке, достаточно подключить его в заголовке документа. Для конструирования слайдера нужен единственный DIV, к которому применяется метод SlideShow().

Подключение и вызов плагина для конструирования слайдера

В заголовке документа между парными тегами <HEAD> подключите библиотеку jQuery и плагин Слайдера.

<script src="js/jquery v1.7.2.js" type="text/javascript"></script>
<script src="plugins/slider/jquery.slider.js" type="text/javascript"></script>

В документе создайте блок <DIV> с уникальным ID. В этот блок будет помещен слайдер изображений.

<div id="SlideShow"></div>

Основа готова теперь чтобы слайдер изображений заработал нужно поместите между тегами <HEAD> небольшой jQuery скрипт, в котором вызывается плагин SlideShow() с опциями. Плагин сконструирует слайдер и оформит его по указанным параметрам.

<script type="text/javascript">
 $(document).ready(function(){
  $("#SlideShow").SlideShow({
   width:"800",
   height:"428",
   control:"160",
   BorderColor:"#000",
   Image:"{images:[{url:"imgs/slideshow/blackcoral.jpg",title:"",link:"#"},{url:"imgs/slideshow/bluepeacockkeiser.jpg",title:"",link:"#"},{url:"imgs/slideshow/purpleunderwater.jpg",title:"",link:"#"},{url:"imgs/slideshow/yellowleavesgold.jpg",title:"",link:"#"}]}",
   Speed:"5000",
   SmallSlideBorderSize:"2",
   SmallSlideBorderColor:"#fff"	
  });
 });
</script>

Опции слайдера

При вызове плагина SlideShow ему передаются опции, которые содержать информацию для конструирования слайдера. На изображении схематично отображены эти опции и элементы слайдера, за которые они отвечают.

 Опции и элементы слайдера

width, height, control – размеры слайдера;

BorderColor – цвет рамки обрамляющей слайдер;

Speed – скорость смены слайдов;

SmallSlideBorderSize – размер рамки в пикселях, который указывает текущий слайд;

SmallSlideBorderColor - цвет рамки;

Image – строка которая передает плагину данные об изображениях. Строка не должна содержать переносов, иначе обработчик выдаст ошибку.

//Правильно
Image:"{images:[{url:"imgs/slideshow/blackcoral.jpg",title:"",link:"#"},{url:"imgs/slideshow/bluepeacockkeiser.jpg",title:"",link:"#"},{url:"imgs/slideshow/purpleunderwater.jpg",title:"",link:"#"},{url:"imgs/slideshow/yellowleavesgold.jpg",title:"",link:"#"}]}",

//Не правильно
Image:"{images:[{url:"imgs/slideshow/blackcoral.jpg",title:"",link:"#"},
 {url:"imgs/slideshow/bluepeacockkeiser.jpg",title:"",link:"#"},
 {url:"imgs/slideshow/purpleunderwater.jpg",title:"",link:"#"},
 {url:"imgs/slideshow/yellowleavesgold.jpg",title:"",link:"#"}]}",

Формат параметра Image:

{
images:[
 {
  url:"Путь до фотографии1",
  title:"Заголовок фотографии1",
  link:"Ссылка на страницу которая срабатывает при нажатии на слайде1"
 },
 {
  url:"Путь до фотографии2",
  title:"Заголовок фотографии2",
  link:"Ссылка на страницу которая срабатывает при нажатии на слайде2"
 },
 …
 {
  url:"Путь до фотографии N",
  title:"Заголовок фотографии N",
  link:"Ссылка на страницу которая срабатывает при нажатии на слайде N"
 }
]
}

Полный листинг

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=win1251" />
 <title>Плагин слайдера фотографий на jQuery</title>

 <script src="js/jquery v1.7.2.js" type="text/javascript"></script>
 <script src="plugins/slider/jquery.slider.js" type="text/javascript"></script>

 <script type="text/javascript">
 $(document).ready(function(){

  $("#SlideShow").SlideShow({
   width:"800",
   height:"428",
   control:"160",
   BorderColor:"#000",
   Image:"{images:[{url:"imgs/slideshow/blackcoral.jpg",title:"",link:"#"},{url:"imgs/slideshow/bluepeacockkeiser.jpg",title:"",link:"#"},{url:"imgs/slideshow/purpleunderwater.jpg",title:"",link:"#"},{url:"imgs/slideshow/yellowleavesgold.jpg",title:"",link:"#"}]}",
   Speed:"5000",
   SmallSlideBorderSize:"2",
   SmallSlideBorderColor:"#fff"
  });

 });
 </script>

</head>
<body style="background-color:#fff;">

 <div id="SlideShow"></div>

</body>
</html>