https://www.es-koyama.com/global/js/toppage.js

1//viewport　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2
3//if (navigator.userAgent.indexOf('iPad') > 0) {
4//	document.write('<meta name="viewport" content="width=980">');
5//}else{
6//	document.write('<meta name="viewport" content="width=device-width">');
7//}
8
9
10
11$(function(){
12// 読み込み中に実行する処理
13var pageId = $("body").attr("id"); console.log("pageId" + pageId); // ページＩＤの取得	
14var pageClass = $("body").attr("class"); console.log("pageClass" + pageClass); // ページＩＤの取得	
15var topPgeID = "top"
16
17
18if(pageId == topPgeID) { 
19
20	
21	var mainImageCount = $("#mainImageCarousel article").length; console.log("mainImageCount" + mainImageCount); //カラムの数	
22		
23	$.each(new Array(mainImageCount - 1),function(f){
24		$("#mainImage .thumbnail").append("<li></li>");	
25	});	
26	
27}
28
29  
30});
31
32//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
33
34$(window).load(function() {
35// 読み込み後に実行する処理
36
37//共通変数 ************************************************************
38
39
40winW = $(window).width(); //ウィンドウの横幅
41winH = $(window).height(); //ウィンドウの縦幅
42bodyH = $("body").height(); //コンテンツの縦幅
43var pageId = $("body").attr("id"); console.log("pageId" + pageId); // ページＩＤの取得	
44var pageClass = $("body").attr("class"); console.log("pageClass" + pageClass); // ページＩＤの取得	
45var topPgeID = "top"
46
47if($("*").find("#carouselChefsSpecial")){
48
49
50if(winW < 670){
51
52$("#carouselChefsSpecial ul li").append('<div class="mask"></div>');
53$('#carouselChefsSpecial ul').carouFredSel({
54		width: '100%',
55		scroll : {
56			items: 1,
57			//スクロール中の実行コード
58			onBefore: function( data ) {
59			data.items.old.removeClass( 'selected' );
60			data.items.visible.eq(2).addClass('selected');
61			data.items.visible.eq(3).addClass('selected');
62			data.items.visible.eq(4).addClass('selected');		
63			}
64		},
65		auto: false,
66		// mousewheel: "scroll",
67		swipe: true,
68		prev: '#carouselChefsSpecial .prev',
69		next: '#carouselChefsSpecial .next',
70		items: {
71			visible: {
72				min: 7,
73				max: 7
74			}
75		}
76});
77
78}
79	
80if(winW > 670){ 
81
82$("#carouselChefsSpecial ul li").append('<div class="mask"></div>');
83$('#carouselChefsSpecial ul').carouFredSel({
84		width: '100%',
85		scroll : {
86			items: 3,
87			//スクロール中の実行コード
88			onBefore: function( data ) {
89			data.items.old.removeClass( 'selected' );
90			data.items.visible.eq(2).addClass('selected');
91			data.items.visible.eq(3).addClass('selected');
92			data.items.visible.eq(4).addClass('selected');		
93			}
94		},
95		auto: false,
96		// mousewheel: "scroll",
97		swipe: true,
98		prev: '#carouselChefsSpecial .prev',
99		next: '#carouselChefsSpecial .next',
100		items: {
101			visible: {
102				min: 7,
103				max: 7
104			}
105		}
106});
107
108}
109	
110
111
112}
113
114if($("*").find("#carouselChefsChoice")){
115
116
117
118
119if(winW < 670){
120
121$("#carouselChefsChoice ul li").append('<div class="mask"></div>');
122$('#carouselChefsChoice ul').carouFredSel({
123		width: '100%',
124		scroll : {
125			items: 1,
126			//スクロール中の実行コード
127			onBefore: function( data ) {
128			data.items.old.removeClass( 'selected' );
129			data.items.visible.eq(2).addClass('selected');
130			data.items.visible.eq(3).addClass('selected');
131			data.items.visible.eq(4).addClass('selected');		
132			}
133		},
134		auto: false,
135		// mousewheel: "scroll",
136		swipe: true,
137		prev: '#carouselChefsChoice .prev',
138		next: '#carouselChefsChoice .next',
139		items: {
140			visible: {
141				min: 7,
142				max: 7
143			}
144		}
145});
146
147}
148	
149if(winW > 670){ 
150
151$("#carouselChefsChoice ul li").append('<div class="mask"></div>');
152$('#carouselChefsChoice ul').carouFredSel({
153		width: '100%',
154		scroll : {
155			items: 3,
156			//スクロール中の実行コード
157			onBefore: function( data ) {
158			data.items.old.removeClass( 'selected' );
159			data.items.visible.eq(2).addClass('selected');
160			data.items.visible.eq(3).addClass('selected');
161			data.items.visible.eq(4).addClass('selected');		
162			}
163		},
164		auto: false,
165		// mousewheel: "scroll",
166		swipe: true,
167		prev: '#carouselChefsChoice .prev',
168		next: '#carouselChefsChoice .next',
169		items: {
170			visible: {
171				min: 7,
172				max: 7
173			}
174		}
175});
176
177}
178
179
180}
181
182if(pageId == topPgeID) {
183
184//TOPページ　カルーセル ************************************************************
185
186
187
188
189
190
191//メインイメージオリジナルカルーセル *********************************************************************
192
193var e = 1;
194var mainFlag = true;
195var mainImageSelector = "#mainImageCarousel article";

196var mainImageContainer = "#mainImageCarousel";
197var mainImageCount = $("#mainImageCarousel article").length; console.log("mainImageCount" + mainImageCount); //カラムの数	
198
199var thumbnailContainer = "#mainImage .thumbnail";
200var thumbnailCircle = "#mainImage .thumbnail li";
201var thumbnailWidth = parseInt($("li",thumbnailContainer).css('width'));
202var thumbnailMargin = parseInt($("li",thumbnailContainer).css('margin-right'));
203
204//メインイメージサムネイルの生成 *********************************************************************
205
206console.log("thumbnailWidth" + thumbnailWidth);
207console.log("thumbnailMargin" + thumbnailMargin);
208
209thumbnailContainerWidth = ((thumbnailWidth + thumbnailMargin) * mainImageCount) + 10;
210
211$(thumbnailContainer).css(
212{
213	"width" : thumbnailContainerWidth + "px",
214	"margin-left" : 0 - (thumbnailContainerWidth / 2) + "px"
215});
216
217$("#mainImage .next").click(function(){
218	
219	 console.log("e" + e);
220	
221	if(mainFlag == true && e != mainImageCount){
222	
223		e++
224		
225		mainFlag = false
226		
227		$(mainImageSelector).removeClass("active");
228		$(thumbnailCircle).removeClass("active");
229		
230		$(mainImageSelector + ":nth-of-type(" + e + ")").toggleClass("active");
231		$(thumbnailCircle + ":nth-of-type(" + e + ")").toggleClass("active");
232		
233		$(mainImageSelector).bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
234			mainFlag = true
235		});
236	
237	}
238	
239	if(mainFlag == true && e == mainImageCount){
240		
241		e = 1
242		
243		mainFlag = false
244		
245		$(mainImageSelector).removeClass("active");
246		$(thumbnailCircle).removeClass("active");
247		
248		$(mainImageSelector + ":nth-of-type(" + e + ")").toggleClass("active");
249		$(thumbnailCircle + ":nth-of-type(" + e + ")").toggleClass("active");
250		
251		$(mainImageSelector).bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
252			mainFlag = true
253		});
254	
255	}
256	
257});
258
259$("#mainImage .prev").click(function(){
260	
261	 console.log("backe" + e);
262	
263	if(mainFlag == true && e != 1){
264	
265		e--
266		
267		mainFlag = false
268		
269		$(mainImageSelector).removeClass("active");
270		$(thumbnailCircle).removeClass("active");
271		
272		$(mainImageSelector + ":nth-of-type(" + e + ")").toggleClass("active");
273		$(thumbnailCircle + ":nth-of-type(" + e + ")").toggleClass("active");
274		
275		$(mainImageSelector).bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
276			mainFlag = true
277		});
278	
279	}
280	
281	if(mainFlag == true && e == 1){
282		
283		e = mainImageCount
284		
285		mainFlag = false
286		
287		$(mainImageSelector).removeClass("active");
288		$(thumbnailCircle).removeClass("active");
289		
290		$(mainImageSelector + ":nth-of-type(" + e + ")").toggleClass("active");
291		$(thumbnailCircle + ":nth-of-type(" + e + ")").toggleClass("active");
292		
293		$(mainImageSelector).bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
294			mainFlag = true
295		});
296	
297	}
298	
299});
300
301
302
303
304//フェイスブックオリジナルカルーセル *********************************************************************
305
306
307
308function facebookCarouselOption() {
309	i = 1;
310	flag = true;
311	column = "#facebookCarousel .carousel dl";　//カラム
312	columnWidth = parseInt($(column).css('width'));　//カラムの横幅
313	count = $('#facebookTrail dl').length; console.log("count" + count); //カラムの数
314	
315	container = "#facebookTrail"; //全体の横幅
316	
317	if(winW < 670){
318		
319	  $(container).css({"width": winW + "px"});
320	}
321		
322	if(winW > 670){ 
323	  $(container).css({"width": count * columnWidth + "px"});
324	}
325	
326	$(container).css({"left": columnWidth + "px"});
327	
328}
329
330facebookCarouselOption();
331
332
333//ウィンドウリサイズで新しい変数を取得・カルセール位置の初期化
334$(window).resize(function(){
335	
336  facebookCarouselOption();
337  $(container).css({"left": columnWidth + "px"});
338  
339  winW = $(window).width();
340  console.log("winW" + winW); 
341  
342	if(winW < 670){
343	  $(container).css({"width": winW + "px"});
344	}
345		
346	if(winW > 670){ 
347	  $(container).css({"width": count * columnWidth + "px"});
348	}
349	
350  
351});
352
353
354$("#facebookControl .next").click(function(){
355	
356	if( i < count && flag == true){
357	
358	flag = false
359	i++
360	
361	var getPosition = parseInt($("#facebookTrail").css("left"));
362	console.log("getPosition" + getPosition);
363	
364	
365	$(container).css({"left": getPosition - columnWidth + "px"}).bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
366	flag = true
367	console.log(flag);
368	});
369	
370	}
371	
372	if( i == 2){
373		$("#facebookControl .prev").show();
374	}
375	
376	if( i == count){
377		$("#facebookControl .next").hide();
378	}
379	
380	
381	
382	
383	
384});
385
386
387$("#facebookControl .prev").click(function(){
388	
389	if( i > 1 && flag == true){
390		
391	flag = false
392	i--
393		
394	var getPosition = parseInt($("#facebookTrail").css("left"));
395	console.log(getPosition);
396	console.log(i);
397	
398	$("#facebookTrail").css({"left": getPosition + columnWidth + "px"}).bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
399	flag = true
400	console.log(flag);
401	});
402		
403	}
404	
405	if( i == 1){
406		$("#facebookControl .prev").hide();
407	}
408	
409	if( i == count-1){
410		$("#facebookControl .next").show();
411	}
412	
413});
414
415
416
417//フェイスブックカルーセルスマートフォン対応****************************
418
419var fi = 3;
420var face = 3;
421
422
423$("#facebookCarousel .button").click(function(){
424
425for (showCounter=0; showCounter<3; showCounter++){
426
427fi++
428
429selectColumn = $(column + ":nth-of-type(" + fi + ")");
430selectColumn.slideToggle();
431console.log("fi" + fi);
432
433
434if (fi >= count) {
435
436	$("#facebookCarousel .button").hide();
437	
438}
439
440}
441
442	
443});
444
445
446
447}
448
449//************************************************************
450
451
452
453});
454
455
456
457
458
459
460
461
462