https://www.namura-law.jp/wp-content/themes/Newnamuralaw/js/sli.js

1$(function(){
2	$(window).load(function(){
3		var setWrap = $('.flickSlider'),
4		setMainView = $('.flickView'),
5		setThumbNail = $('.flickThumb'),
6		setMaxWidth = 920,
7		setMinWidth = 430,
8		thumbNum = 8,
9		thumbOpc = 0.5,
10		scrollSpeed  = 500,
11		delayTime = 5000,
12		easing = 'linear',
13		sideNavi = 'on', // 'on' or 'off'
14		autoPlay = 'on'; // 'on' or 'off'
15
16		var agent = navigator.userAgent;
17		setWrap.each(function(){
18			var thisObj = $(this),
19			childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiLink = mainLi.children('a'),mainLiImg = mainLi.find('img'),
20			childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last'),
21			mainWidth = parseInt(childMain.css('width')),mainHeight = parseInt(childMain.css('height')),listCount = mainUl.children('li').length;
22
23			thisObj.css({display:'block'});
24
25			// ƒŒƒXƒ|ƒ“ƒVƒu“®ìƒƒCƒ“
26			imgSize();
27			function imgSize(){
28				var windowWidth = parseInt($(window).width()),
29				setUlLeft = parseInt(mainUl.css('left')),
30				setlistWidth = parseInt(mainLi.css('width')),
31				setLeft = setUlLeft / setlistWidth;
32
33				if(windowWidth >= setMaxWidth) {
34					thisObj.css({width:setMaxWidth});
35					childMain.css({width:setMaxWidth});
36					mainUl.css({width:((setMaxWidth)*(listCount))});
37					mainLi.css({width:setMaxWidth});
38
39					var listWidthA = parseInt(mainLi.css('width')),
40					leftMax = -((listWidthA)*((listCount)-1)),
41					baseHeight = mainLiImg.height();
42					childMain.css({height:baseHeight});
43					mainUl.css({height:baseHeight});
44					mainLi.css({height:baseHeight});
45
46					thumbLi.css({width:((setMaxWidth)/(thumbNum)),height:''});
47				} else if(windowWidth < setMaxWidth) {
48					var listWidthB = parseInt(childMain.css('width')),
49					leftMax = -((listWidthB)*((listCount)-1));
50					thisObj.css({width:setMaxWidth});
51					if(windowWidth >= setMinWidth) {
52						thisObj.css({width:'100%'});
53						childMain.css({width:'100%'});
54						mainUl.css({width:((listWidthB)*(listCount))});
55						mainLi.css({width:(listWidthB)});
56					} else if(windowWidth < setMinWidth) {
57						thisObj.css({width:setMinWidth});
58						childMain.css({width:setMinWidth});
59						mainUl.css({width:((setMinWidth)*(listCount))});
60						mainLi.css({width:setMinWidth});
61					}
62					var reHeight = mainLiImg.height();
63					childMain.css({height:reHeight});
64					mainUl.css({height:reHeight});
65					mainLi.css({height:reHeight});
66
67					var reWidth = setThumbNail.width();
68					thumbLi.css({width:((reWidth)/(thumbNum))});
69				}
70
71				var adjLeftWidth = parseInt(mainLi.css('width')),
72				adjLeft = adjLeftWidth * setLeft;
73				mainUl.css({left:(adjLeft)});
74			}
75			imgSize();
76			$(window).resize(function(){
77				if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
78					if(autoPlay == 'on'){clearInterval(setTimer);}
79					imgSize();
80					if(autoPlay == 'on'){slideTimer();}
81				} else {
82					imgSize();
83				}
84			});
85
86			// ƒtƒŠƒbƒNƒAƒNƒVƒ‡ƒ“
87			var isTouch = ('ontouchstart' in window);
88			mainUl.on(
89				{'touchstart mousedown': function(e){
90					if(mainUl.is(':animated')){
91						e.preventDefault();
92					} else {
93						if(autoPlay == 'on'){clearInterval(setTimer);}
94						if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
95							e.preventDefault();
96						}
97						this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
98						this.leftBegin = parseInt($(this).css('left'));
99						this.left = parseInt($(this).css('left'));
100						this.touched = true;
101					}
102				},'touchmove mousemove': function(e){
103					if(!this.touched){return;}
104					e.preventDefault();
105					this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
106					this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
107					$(this).css({left:this.left});
108				},'touchend mouseup mouseout': function(e){
109					if (!this.touched) {return;}
110					this.touched = false;

111
112					var setThumbLiActive = thumbUl.children('li.active'),
113					listWidth = parseInt(mainLi.css('width')),leftMax = -((listWidth)*((listCount)-1));
114
115					if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){
116						$(this).stop().animate({left:((this.leftBegin)-(listWidth))},scrollSpeed,easing);
117						setThumbLiActive.each(function(){
118							$(this).removeClass('active');
119							$(this).next().addClass('active');
120						});
121					} else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){
122						$(this).stop().animate({left:((this.leftBegin)+(listWidth))},scrollSpeed,easing);
123						setThumbLiActive.each(function(){
124							$(this).removeClass('active');
125							$(this).prev().addClass('active');
126						});
127					} else if(this.leftBegin === 0) {
128						$(this).stop().animate({left:'0'},scrollSpeed,easing);
129					} else if(this.leftBegin <= leftMax) {
130						$(this).stop().animate({left:(leftMax)},scrollSpeed,easing);
131					} else if(this.left >= 0) {
132						$(this).stop().animate({left:'0'},scrollSpeed);
133					} else if(this.left <= leftMax) {
134						$(this).stop().animate({left:(leftMax)},scrollSpeed,easing);
135					} else {
136						$(this).stop().animate({left:(this.leftBegin)},scrollSpeed,easing);
137					}
138					compBeginLeft = this.leftBegin;
139					compThisLeft = this.left;
140					mainLiLink.click(function(e){
141						if(!(compBeginLeft === compThisLeft)){
142							e.preventDefault();
143						}
144					});
145					if(autoPlay == 'on'){slideTimer();}
146				}
147			});
148
149			// ƒ{ƒ^ƒ“ˆÚ“®“®ì
150			thumbLi.click(function(){
151				if(autoPlay == 'on'){clearInterval(setTimer);}
152				var listWidth = parseInt(mainLi.css('width')),leftMax = -((listWidth)*((listCount)-1)),
153				connectCont = thumbLi.index(this);
154				mainUl.stop().animate({left:(-(listWidth)*(connectCont))},scrollSpeed,easing);
155				thumbLi.removeClass('active');
156				$(this).addClass('active');
157				if(autoPlay == 'on'){slideTimer();}
158			});
159			thumbLiFst.addClass('active');
160			thumbLi.css({opacity:thumbOpc});
161
162			// ƒTƒCƒhƒiƒrƒ{ƒ^ƒ“i—L‚è–³‚µj
163			if(sideNavi == 'on'){
164				childMain.append('<div class="btnPrev"></div><div class="btnNext"></div>');
165				var setPrev = childMain.find('.btnPrev'),setNext = childMain.find('.btnNext'),setPrevNext = childMain.find('.btnPrev,.btnNext');
166				setPrevNext.css({opacity:thumbOpc});
167
168				setNext.click(function(){
169					var setThumbLiActive = thumbUl.children('li.active');
170					setThumbLiActive.each(function(){
171						var listLengh = thumbLi.length;
172						var listIndex = thumbLi.index(this);
173						var listCount = listIndex+1;
174						if(listLengh == listCount){
175							thumbLiFst.click();
176						} else {
177							$(this).next('li').click();
178						}
179					});
180				});
181				setPrev.click(function(){
182					var setThumbLiActive = thumbUl.children('li.active');
183					setThumbLiActive.each(function(){
184						var listLengh = thumbLi.length;
185						var listIndex = thumbLi.index(this);
186						var listCount = listIndex+1;
187						if(1 == listCount){
188							thumbLiLst.click();
189						} else {
190							$(this).prev('li').click();
191						}
192					});
193				});
194			}
195
196			// ƒTƒ€ƒlƒCƒ‹ƒ}ƒEƒXƒI[ƒo[
197			if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
198				thumbLi.hover(function(){
199					$(this).stop().animate({opacity:'1'},300);
200				},function(){
201					$(this).stop().animate({opacity:thumbOpc},300);
202				});
203				if(sideNavi == 'on'){
204					setPrevNext.hover(function(){
205						$(this).stop().animate({opacity:'1'},300);
206					},function(){
207						$(this).stop().animate({opacity:thumbOpc},300);
208					});
209				}
210			}
211
212			// Ž©“®Ä¶i—L‚è–³‚µj
213			if(autoPlay == 'on'){
214				function slideTimer() {
215					setTimer = setInterval(function(){
216						var setThumbLiActive = thumbUl.children('li.active');
217						setThumbLiActive.each(function(){
218							var listLengh = thumbLi.length;
219							var listIndex = thumbLi.index(this);
220							var listCount = listIndex+1;
221							if(listLengh == listCount){
222								thumbLiFst.click();
223							} else {
224								$(this).next('li').click();
225							}
226						});
227					},delayTime);
228				}
229				slideTimer();
230			}
231		});
232	});
233});