jqueryGallery/js/jquery.gallary.js

(function ($) {
	'use strict';

	$.fn.gallery = function(option) {
		
		var $leftArrow;
		var $rightArrow;
		var $item = $('<div>');  // 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 = $('<div>')
			.css('top', maxH/2 )
			.attr('id', id);

		$leftArrow = $('<a>')
			.append('<span class="glyphicon glyphicon-chevron-left">')
			.css('font-size', 30 +'px')
			.appendTo($box)
			.on('click', function(){                        //обработчик событий на стрелке
				changeImgDecrease();
			});

		$rightArrow = $('<a>')
			.addClass('pull-right')
			.append('<span class="glyphicon glyphicon-chevron-right">')
			.css('font-size', 30 +'px')
			.appendTo($box)
			.on('click', function(){
				changeImgIncrease();                           //обработчик событий на стрелке
			});
		
		return $box.appendTo(place);
	}
	function smallGallary(place) {    // small gallary
		var $item = $('<div>')
			.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 = $('<div>')
			.addClass('col-md-4 first')
			.append( $lastPicture )
			.appendTo($item)
			.on('click', function(event){
				changeImgDecrease();                    //обработчик событий на превью
			});
		var $itemChild2 = $('<div>')
			.addClass('col-md-4 ')
			.append($galleryitems.clone() )
			.appendTo($item);
		var $itemChild3 = $('<div>')
			.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);