lightbox.js

lightbox.js

lightbox = (function(){

	var lightboxList = document.querySelectorAll('.js-gallery img'),
		lightboxLength = lightboxList.length;

	for (var i = 0; i < lightboxLength; i++) {
		lightboxList[i].setAttribute('deta-lb-number',i);
		lightboxList[i].addEventListener('click', lightboxShow, false);
	}

	function lightboxShow(e){

		document.documentElement.style.position = 'relative';
		var wrapper = document.createElement('div');

		wrapper.style.position = 'fixed';
		wrapper.style.top= '0';
		wrapper.style.left= '0';
		wrapper.style.zIndex = 999;
		wrapper.style[Dental.setting.vender+'Transition'] = 'all 0.5s ease';
		wrapper.style.height = innerHeight+'px';
		wrapper.style.width = innerWidth+'px';
		wrapper.style.maxWidth = '100%';
		wrapper.style.backgroundColor = 'rgba(0,0,0,0)';
		wrapper.setAttribute('id', 'lightboxBg');

		document.body.appendChild(wrapper);

		setTimeout(function(){
			wrapper.style.backgroundColor = 'rgba(0,0,0,0.4)';
		},10);


		var imgShow = document.createElement('div');

		// imgShow.textContent = e.target.alt;
		imgShow.style.position = 'absolute';
		imgShow.style.top = '50%';
		imgShow.style.left = '50%';
		imgShow.style.padding = '20px 20px 20px 20px';
		imgShow.style.backgroundColor = '#fff';
		imgShow.style.boxShadow = '0px 0px 6px 3px #666';
		imgShow.style.opacity = 0;
		imgShow.style[Dental.setting.vender+'Transition'] = 'all 0.5s ease';
		imgShow.style[Dental.setting.vender+'Transform'] = 'translateX(-50%) translateY(-50%)';

		var imgMain = document.createElement('img');

		imgMain.src = e.target.src;
		
		var set = wrapper.appendChild(imgShow);

		imgShow.appendChild(imgMain);

		var imgText = document.createElement('p');

		imgText.textContent = e.target.alt;

		imgShow.appendChild(imgText);


		setTimeout(function(){

			set.style.opacity = 1;

		}, 500);



		wrapper.addEventListener('mousewheel', function(e){
			e.preventDefault();
		}, false);

		imgShow.addEventListener('click', function(){

			var bg = document.getElementById('lightboxBg');

			bg.style.opacity = 0;

			setTimeout(function(){
				document.body.removeChild(bg);
			}, 500);



		}, false);

	}

})();