thumbnail list banner #2(플러그인 타입)

썸네일 리스트형 배너 플러그인 타입

이번 포스팅은 앞선 썸네일 리스트형 배너 함수형 타입을 플러그인화 시킨 코드입니다.

Result View

See the Pen Thumbnail List Keyvisual #2 by jaeheekim (@jaehee) on CodePen.

JS : PlugIn Source

javascript

/**
 * ================================+
 * @plugin : thumbnail list banner
 * ================================+
 */
 
(function (global, $) {

	var pluginName = 'thumbBanner';

	function ThumbVisual($selector, options) {

		this.$selector = $selector;
		this.$selectorName = !!this.$selector.attr('id') ? '#' + this.$selector.attr('id') : '.' + this.$selector.attr('class');

		this.config = $.extend({}, this._defaults, options || {});

		this.$container =  this.$selector.find('> .container');
		this.detect = {
			current : 0,
			thumbListSize : this.config.thumbListSize,
			thumbSpaceLeft : this.config.thumbSpaceLeft,
			$container : this.$selector.find('> .container'),
			$childrenContainer : this.$container.find('> ul'),
			$containerWidth : this.$container.width(),
			$thumb : this.$container.find('li'),
			thumbStr : '.' + this.$container.attr('class') + ' li',
			maxSize : this.$container.find('li').length,
			$image : $('.'+ this.config.$image + ' > li'),
			prev : this.$selectorName + ' > .' + this.config.prevClass,
			next : this.$selectorName + ' > .' + this.config.nextClass
		};
		this.thumbnailSizeCheck = parseInt(this.detect.maxSize / this.detect.thumbListSize) - 1;
		this.$oldItem = null;
		this._initEvent();
	}

	ThumbVisual.prototype = {
		'_defaults' : {
			'duration': 400,
			'thumbListSize' : 6,
			'thumbSpaceLeft' : -8,
			'$image' : 'image',
			'activeClass' : 'active',
			'prevClass' : 'prev',
			'nextClass' : 'next',
			'fadeSpeed' : 400
		},
		'_initEvent' : function () {
			var _self = this;
			$(document)
				.on('click.gallery.next', this.detect.next, $.proxy( this._nextListShow, _self))
				.on('click.gallery.prev', this.detect.prev, $.proxy(this._prevListShow, _self))
				.on('click.gallery.thumb', this.detect.thumbStr, $.proxy(this._thumbnailShow, _self));
		},
		'_nextListShow' : function () {
			if (this.detect.current < this.thumbnailSizeCheck) {
				this.detect.current++
			}
			this._movingList();
			this._marginListSpace();
		},
		'_prevListShow' : function () {
			if (this.detect.current > 0) {
				this.detect.current--
			}
			this._movingList();
			this._marginListSpace();
		},
		'_movingList' : function () {
			var mvWidth = (this.detect.$containerWidth * this.detect.current) * -1;
			this.detect.$childrenContainer
				.stop()
				.animate({left : mvWidth}, { duration : this.config.duration});
		},
		'_marginListSpace' : function () {
			this.detect.$childrenContainer
				.css('margin-left', this.config.thumbSpaceLeft * (this.detect.current + 1) );
		},
		'_thumbnailShow' : function (e) {
			var $target = $(e.currentTarget),
				idx     = $target.index();
			if ($target.is('.'+ this.config.activeClass)) {
				return
			}
			this._activeThumb($target);
			this.detect.$image
				.css({'display': 'none'})
				.eq(idx)
				.fadeIn(this.config.fadeSpeed)
		},
		'_activeThumb' : function (el) {
			var $target = el;
			this.detect.$thumb.removeClass(this.config.activeClass);
			$target.addClass(this.config.activeClass);
		}
	};


	$.fn[pluginName] = $.fn[pluginName] || function (options) {

			var $this = this;
			return $.each($this, function (idx, el) {
				var $selector = $this.eq(idx);
				if(!$.data(this, 'plugin_' + pluginName)) {
					$.data(this, 'plugin_' + pluginName, new ThumbVisual($selector, options))
				}
				return $selector;
			});

		};

})(window, window.jQuery);

$(function () {

	$('#thumbnail').thumbBanner();

	/**
	 * ==============================+
	 * 플러그인 기본 옵션값
	 * ==============================+
	 */
	/*
	 $(selecotr).thumbBanner({
		duration : 400, 		// 썸네일 리스트 애니메이트 속도
		thumbListSize : 6, 	// 보여질 썸네일 리스트 갯수
		thumbSpaceLeft : -8, 	// 썸네일 래퍼 margin-left 값
		$image : 'image', 	// 큰 이미지 클래스
		activeClass : 'active', // 썸네일 활성화 클래스
		prevClass : 'prev', 	// 이전 버튼 클래스
		nextClass : 'next', 	// 다음 버튼 클래스
		fadeSpeed : 400 		// 페이드인 스피드
	});
	*/
});

Related Info

1. thummail list banner #1 (함수형)

Jaehee's WebClub