(function ($) { 'use strict'; $.fn.gallery = function(option) { var $leftArrow; var $rightArrow; var $item = $('
'); // small gallary var $gallery = $('#gallary'); var $galleryitems = $gallery.children(); var defaults = { current: 0, place: '.container', // указываем куда добавить стрелки key: false, // флаг на использование клавиатуры preview: false }; var options = $.extend(defaults, option); // переопределяем настройки по дефолту var maxH = $($galleryitems[0]).height(); for (var i=0; i < $galleryitems.length; i++) { if($($galleryitems[i]).height() < maxH ) maxH = $($galleryitems[i]).height(); } // тут определяем наибольшую высоту из набора наших итемов $gallery.height(maxH + 'px'); // задаем высоту в пикселях return this.each(function(){ var $gallery = $(this); $gallery.addClass('gallary'); $galleryitems.addClass('gallary-item thumbnail'); $galleryitems.eq(options.current).addClass('current'); // берет элемент в наборе и показывает его $gallery.attr('tabindex', 0); function changeImgDecrease() { var $currentItem = $('.current', $gallery); var next = $currentItem.index() - 1; if (next === $galleryitems.length) next = 0; $galleryitems.removeClass('current').eq(next).addClass('current'); $('#small-gallary').remove(); //удаление малой галереи if(options.preview == true) { // разрешение на превью smallGallary(options.place); // вызов функции малой галереи } } // функция которая идет в лево (в обратном порядке) function changeImgIncrease() { var $currentItem = $('.current', $gallery); var next = $currentItem.index() + 1; if (next === $galleryitems.length) next = 0; $galleryitems.removeClass('current').eq(next).addClass('current'); $('#small-gallary').remove(); //удаление малой галереи if(options.preview == true) { // разрешение на превью smallGallary(options.place); // вызов функции малой галереи } } // функция которая идет в право (в обычном порядке порядке) function boxArrow(place, maxH, id) { //делаем стрелочки var $box = $('
') .css('top', maxH/2 ) .attr('id', id); $leftArrow = $('') .append('') .css('font-size', 30 +'px') .appendTo($box) .on('click', function(){ //обработчик событий на стрелке changeImgDecrease(); }); $rightArrow = $('') .addClass('pull-right') .append('') .css('font-size', 30 +'px') .appendTo($box) .on('click', function(){ changeImgIncrease(); //обработчик событий на стрелке }); return $box.appendTo(place); } function smallGallary(place) { // small gallary var $item = $('
') .attr('id', 'small-gallary') .addClass('row'); var $currentItem = $('.current', $gallery); // определяем предыдущую картинку var last = $currentItem.index() - 1; if (last === $galleryitems.length) last = 0; var $lastPicture = $galleryitems.clone().removeClass('current').eq(last).addClass('current'); // определяем следующую картинку var next = $currentItem.index() + 1; if (next === $galleryitems.length) next = 0; var $nextPicture = $galleryitems.clone().removeClass('current').eq(next).addClass('current'); var $itemChild1 = $('
') .addClass('col-md-4 first') .append( $lastPicture ) .appendTo($item) .on('click', function(event){ changeImgDecrease(); //обработчик событий на превью }); var $itemChild2 = $('
') .addClass('col-md-4 ') .append($galleryitems.clone() ) .appendTo($item); var $itemChild3 = $('
') .addClass('col-md-4 ') .append( $nextPicture ) .appendTo($item) .on('click', function(event){ changeImgIncrease(); //обработчик событий на превью }); $item.appendTo(place); } boxArrow(options.place, maxH, 'arrow'); // вызываю свою функцию if(options.preview == true) { // разрешение на превью smallGallary(options.place); } if (options.key == true) { // разрешение на клавиши $gallery.on('keyup', function(event) { if (event.which === 39) { changeImgIncrease(); }else if(event.which === 37) { changeImgDecrease(); } }) } }); } })(jQuery);