관리-도구

편집 파일: functions-bak.js

/* global screenReaderText */
/**
 * Theme functions file.
 *
 * Contains handlers for navigation and widget area.
 */

( function( $ ) {
	$(document).ready( function() {
		
		/**
		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
			//alert('here');
		} else {
			// run codes on NON mobile devices
			if($('body').hasClass('home')) {
			} else {
			}
		}	
		*/
		
		$('i.fa-arrow-left').click(function(){
			imgId = $('.galleryList .active').attr('id');
			cycleImg('prev', imgId);
		});
		$('i.fa-arrow-right').click(function(){
			imgId = $('.galleryList .active').attr('id');
			cycleImg('next', imgId);
		});
		
		function cycleImg(cycle, imgId) {
			if(cycle == 'next') {
				var cycleToimgId = parseInt(imgId) + 1;

if(cycleToimgId == 7) {
					alert('Click gallery to view more');
				} else {			
					$('div.galleryImg').removeClass('active');
					$('.gallery'+cycleToimgId).addClass('active');
					
					bg = $('.gallery'+cycleToimgId+' .getImgSrc').attr('attr-imgSrc');
					url = bg.replace('url(','').replace(')','').replace('"', '').replace('"', '');;

changeImgUrl(url);
				}
			}
			if(cycle == 'prev') {
				var cycleToimgId = parseInt(imgId) - 1;
				
				if(cycleToimgId == 0) {
					alert('Click gallery to view more');
				} else {
					$('div.galleryImg').removeClass('active');
					$('.gallery'+cycleToimgId).addClass('active');
					
					bg = $('.gallery'+cycleToimgId+' .getImgSrc').attr('attr-imgSrc');
					url = bg.replace('url(','').replace(')','').replace('"', '').replace('"', '');;

changeImgUrl(url);
				}
			}
		}
		
		function changeImgUrl(url) {
			$('div.imageHere').css({
				'opacity':0.0,
				'background-image':'url('+url+')'
			}).animate({ opacity:1.0}, 500);
		}
		
		$('div.galleryImg').click(function(){
			$(this).addClass('active');
			
			bg = $(this).children('.getImgSrc').attr('attr-imgSrc');
			url = bg.replace('url(','').replace(')','').replace('"', '').replace('"', '');;
			
			changeImgUrl(url);
			
			var percentHeight = .80 * $(window).height();
			var heightToAppend = Math.round(percentHeight);
			
			var percentWidth = .70 * $(window).width();
			var widthToAppend = Math.round(percentWidth);

$('.galleryGradient').fadeIn();
			$('.galleryWrapper, .galleryContainer').show();
			
			$('.galleryContainer').animate({
				height:heightToAppend,
				width:widthToAppend
			}, 700);
			
			$('.galleryContainer').animate({
				'padding-bottom':45
			},function(){
				$('span.closeBtn').fadeIn();
			});			
			
		});
		
		$('span.closeBtn').click(function(){
			
			$('.galleryGradient').fadeOut('fast', function(){
				$('.galleryWrapper').hide();
				$('.galleryContainer').hide();
				
				$('.galleryContainer').css({
					height:300,
					width:300,
					'padding-bottom':10
				});	
				
				$('div.galleryImg').removeClass('active');
			});
		});
				
		
		if($('body').hasClass('page-template-page-nextStepToOrderMyKitchen')) {
			
			var path1 = $("#path1");

// 1st circle			
			// prepare SVG
			pathPrepare(path1);	
			var controller = new ScrollMagic();		
			
			var tween = new TimelineMax()
			.add(TweenMax.to(path1, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}));	
			// build scene
			var scene = new ScrollScene({
				triggerElement: ".step1", 
				duration:0 ,
				reverse: false
			}).setTween(tween).addTo(controller).setClassToggle('.step1', 'scene-is-active');
			
			// show indicators (requires debug extension)
			// scene.addIndicators();

// 2nd circle
			// prepare SVG
			var path2 = $("#path2");
			var path3 = $("#path3");
			pathPrepare(path2);
			pathPrepare(path3);
			
			var controller2 = new ScrollMagic();		
			
			var tween2 = new TimelineMax()
			.add(TweenMax.to(path2, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}))
			.add(TweenMax.to(path3, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}));
			// build scene
			var scene2 = new ScrollScene({
				triggerElement: ".step2", 
				duration:0 ,
				reverse: false
			}).setTween(tween2).addTo(controller2);
			// show indicators (requires debug extension)
			// scene2.addIndicators();

// 3rd circle
			// prepare SVG
			var path4 = $("#path4");
			var path5 = $("#path5");
			var path6 = $("#path6");
			pathPrepare(path4);
			pathPrepare(path5);
			pathPrepare(path6);
			
			var controller3 = new ScrollMagic();		
			
			var tween3 = new TimelineMax()
			.add(TweenMax.to(path4, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}))
			.add(TweenMax.to(path5, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}))
			.add(TweenMax.to(path6, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}));
			
			// build scene
			var scene3 = new ScrollScene({
				triggerElement: ".step3", 
				duration:0 ,
				reverse: false
			}).setTween(tween3).addTo(controller3);
			// show indicators (requires debug extension)
			// scene3.addIndicators();		
			
			// 4th circle
			// prepare SVG
			var path7 = $("#path7");
			var path8 = $("#path8");
			var path9 = $("#path9");
			var path10 = $("#path10");
			pathPrepare(path7);
			pathPrepare(path8);
			pathPrepare(path9);
			pathPrepare(path10);
			
			var controller4 = new ScrollMagic();		
			
			var tween4 = new TimelineMax()
			.add(TweenMax.to(path7, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}))
			.add(TweenMax.to(path8, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}))
			.add(TweenMax.to(path9, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}))
			.add(TweenMax.to(path10, 0.5, {
				strokeDashoffset: 0, 
				ease:Linear.easeNone
			}));
			
			// build scene
			var scene4 = new ScrollScene({
				triggerElement: ".step4", 
				duration:0 ,
				reverse: false
			}).setTween(tween4).addTo(controller4);
			// show indicators (requires debug extension)
			scene4.addIndicators();		
		} 
		
		function pathPrepare ($el) {
			var lineLength = $el[0].getTotalLength();
			
			$el.css("stroke-dasharray", lineLength);
			$el.css("stroke-dashoffset", lineLength);
		}		
		
		function isScrolledIntoView(elem) {
			/*
				NOTE!
				Element should not be hidden!
			*/
		    var docViewTop = $(window).scrollTop();
		    var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
		    var elemBottom = elemTop + $(elem).height();
			
		    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
		}		
		
		$('a#imageSlider').owlCarousel({
	      items:6,
	      autoPlay:2000
		});			
		
		
	});
	
	
} )( jQuery );