thumbnail list banner #1 (ver1. 함수형 타입)

썸네일 리스트형 배너

이번 포스팅에서는 간단한 썸네일 리스트 배너를 작성해 보도록 합니다.(학습 목적으로 참고하시기 바랍니다.)

Result View

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

JavaScript Source

javascript

var DUI = DUI || {};

(function (global, $) {

	DUI.gallery = function (selector) {
		var current            = 0,
			thumbListSize      = 6,
			thumbnail          = $(selector),
			prev               = selector + ' > .prev',
			next               = selector + ' > .next',
			$container         = thumbnail.find('> .container > ul'),
			$containWidth      = thumbnail.find('> .container').width(),
			$thumb             = $container.find('> li'),
			thumbStr           = '.' + thumbnail.find('> .container').attr('class') + ' li',
			maxSize            = $thumb.length, // 썸네일 갯수
			$image             = $('.image > li'),
			thumbnailSizeCheck = parseInt(maxSize / thumbListSize) - 1;

		$(document)
			.on('click.gallery.next', next, nextListShow)
			.on('click.gallery.prev', prev, prevListShow)
			.on('click.gallery.thumb', thumbStr, thumbnailShow);

		function nextListShow() {
			if(current < thumbnailSizeCheck) {
				current++;
			}
			marginSpace();
			movingList();
		}
		
		function prevListShow() {
			if(current > 0) {
				current--;
			}
			marginSpace();
			movingList();
		}
		
		function thumbnailShow() {
			$image.css('display', 'none');
			var i = $(this).index();
			$image.eq(i).fadeIn();
		}
		
		function movingList(){
			var mvWidth = $containWidth * current * -1;
			$container
				.stop()
				.animate({left : mvWidth}, { duration : 400});
		}
		
		function marginSpace() {
			$container.css('margin-left', -8 * (current + 1) );
		}
	};

	$(function () {
		DUI.gallery('#thumbnail');
	});

})(window, window.jQuery);

Related Info

1. thumbnail list banner #1 - (ver2. 함수형 타입)
2. thummail list banner #2 (플러그인)

Jaehee's WebClub