Jquery Easy Slider - доработка плагина

Суббота, 07 Май 2011

Наверно многие знакомы с плагином Jquery Easy Slider, который позволяет пролистывать картинки или контент. Плагин довольно хорошо работает и легко оформляется через CSS. Однако в нем не был предусмотрен один момент - при пролистывании в области которая отображается, одновременно может находится несколько элементов, а не только один.

Пример слайдера:

Jquery Easy Slider

Посмотреть Demo

Для решения такой задачи в одном из проектов пришлось немного доработать слайдер. Попробую обьяснить что именно добавилось и изменилось. Во первых в default configuration properties была добавлена переменная var a;, которая содержит в себе количество одновременно отображаемых элементов в слайдере (в данном примере это картинки в списке li).

 
// default configuration properties
var defaults = {
  prevId:     'prevBtn',
  prevText:     'Previous',
  nextId:     'nextBtn',  
  nextText:     'Next',
  orientation:  '', //  'vertical' is optional;
  speed:       800,
  a:              4 //количество элементов li в области отображения
};

Во вторых изменен способ вычисления ширины с:

 
var w = obj.width();

на:

 
var w = $("li", obj).width(); //ширина элемента li

Таким способом определяется ширина отдельного li - но это предпологает что в CSS для всех элементов списка в слайдере, должна быть установлена одинаковая ширина!

Таким же образом вычисляется и высота отдельного элемента списка в слайдере - li

 
var h = $("li", obj).height(); //высота элемента li

Для obj - который содержит ссылку на узел DOM - $("#slider"), добавлена установка ширины и высоты на основе вычисленя количества элементов в переменой var a; и их ширины, т.е произведению количества элементов на их ширину. Так же добавляется CSS свойство overflow: hidden, которое позволяет скрывать элементы не помещающиеся в область просмотра. С помощью этого достигается эффект одновременного отображения в слайдере нужного количества элементов.

 
obj.css({'width': w*options.a, 'height': h, 'overflow': 'hidden'});

Так же изменен способ расчета значения переменной var ts;, которая содержит значение при котором лиистать далее (next), уже нельзя. Изменено с:

 
var ts = s-1;

на:

 
var ts = s-options.a;

Принцип заключается в том, что от общего количества элементов в слайдере, вычитается количество одновременно отображаемых элементов. К примеру если s=16 и a=4 то 16-4=12, пролистав до 12`го элемента в слайдере, оставшиеся четыре будут находится в области просмотра obj контейнера $("#slider"), и далее уже нет необходимости листать.

Полная часть кода в которой были изменения теперь выглядит так:

 
(function($) {
 
  $.fn.easySlider = function(options){
 
    // default configuration properties
    var defaults = {
      prevId:     'prevBtn',
      prevText:     'Previous',
      nextId:     'nextBtn',  
      nextText:     'Next',
      orientation:  '', //  'vertical' is optional;
      speed:       800,
      a:              4
    }; 
 
    var options = $.extend(defaults, options);  
 
    return this.each(function() {  
      obj = $(this);         
      var s = $("li", obj).length; //количество элементов li
      var w = $("li", obj).width(); //ширина элемента li
      var h = $("li", obj).height(); //высота элемента li
 
      obj.css({'width': w*options.a, 'height': h, 'overflow': 'hidden'});
 
      var ts = s-options.a;
      ...

На счет изменений все, осталось лишь привести пример подключения слайдера для тех кто использует его впервые.

Подключите CSS(опционально):

 
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

В <head> поместите подгрузку библиотеки Jquery и плагина Jquery Easy Slider, а также JS код инициализции плагина:

 
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#slider").easySlider({a:7,speed:300});
  });
</script>

Создайте следующую структуру HTML которая будет обрабатыватся плагином Easy Slider:

 
<div class="clider-cont">
  <div id="slider">
    <ul>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      ...
    </ul>
  </div>
</div>

Вот и все, спасибо за внимание.

Посмотреть пример: Jquery Easy Slider.

Скачать пример: Jquery Easy Slider.

PS. Читайте последние записи RSS Подписка на RSS

Метки:

Jquery Easy Slider - доработка плагина

Похожие статьи:

Комментарии

Добавить комментарий