https://cocon-jewelry.com/assets/js/underlayers.js

1$(function () {
2
3	let scroll;
4	let header = $('.l-header');
5	let hh = header.outerHeight();
6	function mainAjust() {
7		hh = header.outerHeight();
8		$('main').css('padding-top', hh);
9	}
10	mainAjust();
11	$(window).on("orientationchange resize", function () {
12		mainAjust();
13	});
14	//スクロール
15	$(window).scroll(function () {
16		scroll = $(this).scrollTop();
17		if (hh < scroll) {
18			header.removeClass('is-wide');
19		}
20		if (scroll < hh) {
21			header.addClass('is-wide');
22		}
23	})
24
25
26	//デザイナー詳細のスライダー
27	const designerSwiper = new Swiper('#designer-detail .swiper', {
28		// 以下にオプションを設定
29		loop: true,
30		//ナビゲーションボタン（矢印）表示の設定
31		navigation: {
32			nextEl: '.swiper-button-next', //「次へボタン」要素の指定
33			prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
34		},
35		breakpoints: {
36			767.98: {
37				slidesPerView: 'auto',
38				centeredSlides: true,
39			},
40		},
41	});
42
43	//作品詳細のスライダー
44	const detailSwiper = new Swiper('#designer-achievement .swiper', {
45		//ナビゲーションボタン（矢印）表示の設定
46		navigation: {
47			nextEl: '.swiper-button-next', //「次へボタン」要素の指定
48			prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
49		},
50		breakpoints: {
51			767.98: {
52				slidesPerView: 'auto',
53				centeredSlides: true,
54			},
55		},
56	});
57
58
59	//ギャラリーのスライダー
60	const gallerySwiper = new Swiper('#gallery .swiper', {
61		loop: true,
62		pagination: {
63			el: '.swiper-pagination',
64			type: 'fraction', //ページネーションの種類
65		},
66		//ナビゲーションボタン（矢印）表示の設定
67		navigation: {
68			nextEl: '.swiper-button-next', //「次へボタン」要素の指定
69			prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
70		},
71		breakpoints: {
72			767.98: {
73				slidesPerView: 'auto',
74				centeredSlides: true,
75			},
76		},
77	});
78
79	//申し込みサンプルのスライダー
80	const consultationSwiper = new Swiper("#consultation .example.swiper", {
81		slidesPerView: 'auto',
82		centeredSlides: true,
83		autoHeight: true,
84		//ナビゲーションボタン（矢印）表示の設定
85		navigation: {
86			nextEl: '.swiper-button-next', //「次へボタン」要素の指定
87			prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
88		},
89	});
90
91	//プライスのスライダー
92	const priceSwiper = new Swiper('#price .swiper', {
93		loop: true,
94		on: {
95			slideChange: (priceSwiper) => {
96				detailShow();
97			},
98		},
99		pagination: {
100			el: '.swiper-pagination',
101			type: 'fraction', //ページネーションの種類
102		},
103		//ナビゲーションボタン（矢印）表示の設定
104		navigation: {
105			nextEl: '.swiper-button-next', //「次へボタン」要素の指定
106			prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
107		},
108		breakpoints: {
109			767.98: {
110				slidesPerView: 'auto',
111				centeredSlides: true,
112			},
113		},
114	});
115	function detailShow() {
116		$('.swiper-slide').each(function () {
117			$(this).children('.l-swiper-inner').children('.l-create-detail').removeClass('is-detail-show');
118		});
119		$('.swiper-pagination').removeClass('is-pagenation-show');
120		setTimeout(function () {
121			$('.swiper-slide-active .l-create-detail').addClass('is-detail-show');
122			$('.swiper-pagination').addClass('is-pagenation-show');
123		}, 100);
124	}
125});
126//作品詳細の隠れている高さ
127let listMargin;
128let sw;
129let clickCount = 1;
130let openHeight;
131let itemsLength;
132let clickCounter;
133function viewHeight() {
134	if (window.matchMedia('(min-width: 768px)').matches) {
135		//PCのときはマージンが40px
136		listMargin = 40;
137	} else {
138		//スマホはマージンなし
139		listMargin = 0;
140	} if (!$('#designer-detail .bl-achievement__list').hasClass('is-open')) {
141		//サムネイル3つ分のマージン含んだ高さ
142		sw = ($('#designer-detail .bl-achievement__item').outerHeight() + listMargin) * 3;
143		//開く高さは3つ分のマージン含んだ高さとボタンがクリックされた回数
144		openHeight = sw * clickCount;
145		$('#designer-detail .bl-achievement__list').css('max-height', openHeight);
146	}
147}
148$(window).on('load', function () {
149	//ロード時
150	viewHeight();
151	//サムネイルの個数取得
152	itemsLength = $('.bl-achievement__item').length;
153	//サムネイルが9以下であればmoreボタン非表示
154	if (itemsLength <= 9) {
155		$('#designer-detail .m-button-more').addClass('is-hide');
156	} else {
157		//サムネイルを3つ分の高さで割って何回クリックさせるか

158		clickCounter = Math.ceil(itemsLength / 9);
159	}
160});
161$(window).resize(function () {
162	//ウィンドウリサイズの度に再計算
163	viewHeight();
164});
165
166$('#designer-detail .m-button-more').on('click', function () {
167	//ボタンがクリックされた回数
168	clickCount++;
169	//クリックされた分だけmax-heightを変更
170	openHeight = sw + openHeight;
171	$('.bl-achievement__list').css('max-height', openHeight);
172	//クリックが上限に来たらボタン非表示
173	if (clickCounter <= clickCount) {
174		$(this).addClass('is-hide');
175	}
176});
177
178
179let close = $('.modal-close'),
180	container = $('#modal01.modal-container'),
181	container2 = $('#modal02.modal-container');
182
183//開くボタンをクリックしたらモーダルを表示する
184function modalOpen() {
185	container.addClass('is-active');
186};
187function modalOpen2() {
188	container2.addClass('is-active');
189};
190//閉じるボタンをクリックしたらモーダルを閉じる
191function modalClose() {
192	$('.modal-container').removeClass('is-active');
193}
194//モーダルの外側をクリックしたらモーダルを閉じる
195$('.modal-bg').on('click', function () {
196	$(this).parent().removeClass('is-active');
197})