본문으로 바로가기

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

category Code Lab 2016. 9. 12. 09:38

썸네일 리스트형 배너

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


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);





Jaehee's WebClub


'Code Lab' 카테고리의 다른 글

심플 애니 레이어팝업  (3) 2016.09.29
thumbnail list banner #2(플러그인 타입)  (0) 2016.09.13
Accordion Menu Plug-in Type  (1) 2016.09.08
리스트(댓글형) 탭 메뉴 UI  (0) 2016.08.30
카드 셔플 애니메이션  (0) 2016.06.29