http://food-majority.co.jp/js/function.js

1/* ================================================================= 
2 License : e-TRUST Inc.
3 File name : function.js
4 Style : function
5================================================================= */
6
7$(function () {
8	/* ##### START JQUERY TEMPLATE ##################################### */
9
10	rollover("#siteID a img", 0.6, 200); //除外するclass,id / opacity / speed
11	scroll("", 500, 200); //対象ID / スクロール量 / speed
12	//imgReplace();
13	accordionPanel(".accBtn", ".accOpen", 300);
14	spAutoTel(".call", "03-5707-9797"); //telをwrapしている要素にclassをつける
15	objectFitImages();
16
17	/* ##### START JQUERY ############################################## */
18
19	if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
20		$('.telLink').removeClass('is-eventNone');
21	}
22
23	$(function () {
24		var minWidth = 468;
25		if (minWidth <= $(this).width()) {
26			$('.home_td .box').tile(2);
27			$(window).load(function () {
28				$('.home_td .box').tile(2);
29			});
30		}
31		$(window).resize(function () {
32			if (minWidth <= $(this).width()) {
33				$('.home_td .box').tile(2);
34			}
35			else {
36				$('.home_td .box').removeAttr('style');
37			}
38		});
39	});
40
41	$('.header').bgSwitcher({
42		images: ['images/common/main01.jpg', 'images/common/main02.jpg'],
43		interval: 4000,
44		duration: 1500,
45	});
46
47	$(".type").t({
48		// caret: false,
49		speed: 175,
50		delay: 2,
51	})
52
53	$(".reserve_btn").on("click", function () {
54		$("#f_reserve").toggleClass("active");
55	});
56
57	/* 開閉パネル */
58	$("div.menu").hide();
59	$("div.category").click(function () {
60		$("div.menu").slideUp();
61		$("div.category").removeClass("open");
62		if ($("+div", this).css("display") == "none") {
63			$("+div", this).slideDown();
64			$(this).addClass("open");
65		}
66	});
67	if ($("#box").length) {
68		$("#box").jScrollPane();
69	};
70
71	//ヘッダーh1変更
72	if ($(".h1txt").length) {
73		var h1Txt = $(".h1txt").text();
74		$("h1").text(h1Txt);
75		$(".h1txt").remove();
76	}
77
78	$('.slider').slick({
79		arrows: false,
80		autoplay: true,
81		speed: 1500,
82		autoplaySpeed: 3500,
83		pauseOnFocus: false,
84		pauseOnHover: false
85	});
86
87	var startPos = 0, winScrollTop = 0;
88	$(window).on('scroll', function () {
89		winScrollTop = $(this).scrollTop();
90		if (winScrollTop >= startPos) {
91			if (winScrollTop >= 200) {
92				$('#f_reserve').removeClass('hide');
93			}
94		} else {
95			$('#f_reserve').addClass('hide');
96		}
97		startPos = winScrollTop;
98	});
99
100	var navFlg = false;
101	$('.sp_menu').click(function () {
102		if ($(this).hasClass('on')) {
103			$(this).addClass('off').removeClass('on');
104			$('#nav_sp').fadeOut();
105		} else {
106			$(this).addClass('on');
107			$('#nav_sp').fadeIn();
108		}
109		if (!navFlg) {
110			$('.nav_wrap ul li').each(function (i) {
111				$(this).delay(i * 150).animate({
112					'opacity': 1,
113				}, 550);
114			}); navFlg = true;
115		}
116		else {
117			$('.nav_wrap ul li').css({
118				'opacity': 0,
119			}); navFlg = false;
120		}
121	});
122
123	$('.home_slick div').filter(function () {
124		return $(this).html() === '\n';
125	}).remove();
126	$(".home_slick div:empty").remove();
127	$('.home_slick .clearfix').slick({
128		arrows: false,
129		autoplay: true,
130		slidesToShow: 3,
131		responsive: [{
132			breakpoint: 640,
133			settings: {
134				slidesToShow: 2,
135				slidesToScroll: 1,
136			}
137		}],
138		pauseOnFocus: false,
139		pauseOnHover: false
140	});
141	$('.home_slick div').filter(function () {
142		return $(this).html() === '\n';
143	}).remove();
144	$(".home_slick div:empty").remove();
145
146	$(".dsnone").remove();
147
148	$('.modal').modaal();
149
150	$('.p').replaceWith(function () {
151		var this_class = $(this).attr("class") ? ' class="' + $(this).attr("class") + '"' : '';
152		var this_id = $(this).attr("id") ? ' id="' + $(this).attr("id") + '"' : '';
153		var this_style = $(this).attr("style") ? ' style="' + $(this).attr("style") + '"' : '';
154		$(this).replaceWith('<p' + this_id + this_class + this_style + '>' + $(this).html() + '</p>');
155	});
156
157
158	$(function () {
159		$('.altText').each(function () {
160			alt = $(this).find('img').addClass('pc').attr('alt');
161			$(this).prepend('<span class="sp">' + alt + '</span>');
162		});
163	});
164
165	/* Scroll PageTop */
166	var topBtn = $('#footer-fixed');
167	topBtn.hide();
168	$(window).scroll(function () {
169		if ($(this).scrollTop() > 100) {
170			topBtn.fadeIn();
171		} else {
172			topBtn.fadeOut();
173		}
174	});
175
176	//ヘッダーh2変更
177	if ($(".h2txt").length) {
178		var h2Txt = $(".h2txt").text();
179		$("h2").text(h2Txt);
180		$(".h2txt").remove();
181	}
182	//ぱんくずテキスト変更
183	if ($(".pankuzu-now").length) {
184		var hpTxt = $(".pankuzu-now").text();
185		$("#pankuzu-now").text(hpTxt);
186		$(".pankuzu-now").remove();
187	}
188
189	$(window).scroll(function () {
190		var scroll = $(window).scrollTop();
191		var windowHeight = $(window).height();
192		$('.effect01,.effect03').each(function () {
193			var POS = $(this).offset().top;
194			if (scroll > POS - windowHeight + windowHeight / 4) {
195				$(this).css({
196					'opacity': '1',
197					'transform': 'translateX(0)',
198					'-webkit-transform': 'translateX(0)',
199					'-moz-transform': 'translateX(0)',
200					'-ms-transform': 'translateX(0)'
201				});
202			}
203		});
204		$('.effect02').each(function () {
205			var POS2 = $(this).offset().top;
206			if (scroll > POS2 - windowHeight + windowHeight / 2) {
207				$(this).css({
208					'opacity': '1',
209					'transform': 'translateY(0)',
210					'-webkit-transform': 'translateY(0)',
211					'-moz-transform': 'translateY(0)',
212					'-ms-transform': 'translateY(0)'
213				});
214			}
215		});
216		$('.effect04').each(function () {
217			var POS2 = $(this).offset().top;
218			if (scroll > POS2 - windowHeight + windowHeight / 15) {
219				$(this).css({
220					'opacity': '1',
221					'transform': 'translateY(0)',
222					'-webkit-transform': 'translateY(0)',
223					'-moz-transform': 'translateY(0)',
224					'-ms-transform': 'translateY(0)'
225				});
226			}
227		});
228	});
229
230	/* !dropdownmenu ------------------------------------------------------------ */
231	$("#nav_global ul li ul").hide();
232	$("#nav_global ul li").hover(function () {
233		$("ul:not(:animated)", this).slideDown();
234	}, function () {
235		$("ul", this).slideUp();
236	});
237
238

239	/* !fancyBox ---------------------------------------------------------------- */
240	$('.fancybox').each(function (i) {
241		$(".fancybox a[href$='.jpg'],.fancybox a[href$='.jpeg'],.fancybox a[href$='.png'],.fancybox a[href$='.gif'],.fancybox a[href$='.JPG'],.fancybox a[href$='.JPEG'],.fancybox a[href$='.PNG'],.fancybox a[href$='.GIF']").each(function () {
242			$(this).attr({ "rel": "grp" + i, "title": $('img', $(this)).attr("alt") });
243		}).fancybox({
244			transitionIn: 'elastic',  //'elastic', 'fade' or 'none'
245			transitionOut: 'elastic',  //'elastic', 'fade' or 'none'
246			centerOnScroll: true
247		});
248	});
249
250	$('.fancybox2').fancybox({
251		titlePosition: 'inside',
252		transitionIn: 'none',
253		transitionOut: 'none',
254	});
255
256	/* !SP ---------------------------------------------------------------- */
257	$('a img').bind('touchstart', function () {
258		$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
259	});
260	$('a img').bind('touchend', function () {
261		$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
262	});
263
264	/* ##### END JQUERY ################################################ */
265});
266
267
268
269/* !rollover ---------------------------------------------------------------- */
270var rollover = function (exclusion, opacity, speed) {
271	$("a img").not(exclusion).each(function () {
272		var img = $(this);
273		if ($(this).attr("src").match("_off")) {
274			$(this).hover(function () {
275				$(img).attr("src", $(img).attr("src").replace("_off", "_on"));
276			}, function () {
277				$(img).attr("src", $(img).attr("src").replace("_on", "_off"));
278			});
279		} else {
280			$(this).hover(function () {
281				$(img).stop().animate({ "opacity": opacity }, speed);
282			}, function () {
283				$(img).stop().animate({ "opacity": 1 }, speed);
284			});
285		}
286	});
287};
288
289/* !smoothscroll ------------------------------------------------------------ */
290var scroll = function (elemClass, scrollIncrement, speed) {
291	$('a[href^=#]').click(function () {
292		var href = $(this).attr("href");
293		var target = $(href == "#" || href == "" ? 'html' : href);
294		var position = target.offset().top;
295		$("html, body").animate({ scrollTop: position }, speed, "swing");
296		return false;
297	});
298	$(elemClass).hide();
299	$(window).scroll(function () {
300		if ($(this).scrollTop() > scrollIncrement) {
301			$(elemClass).fadeIn();
302		} else {
303			$(elemClass).fadeOut();
304		}
305	});
306	// 	var device = navigator.userAgent;
307	// 	if(device.indexOf('iPhone') > 0 || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
308	// 	$(elemClass).css({"position":"fixed","right":"0","bottom":"0"});
309	// }
310};
311
312/* !img replace ------------------------------------------------------------ */
313
314$(function () {
315	// 置換の対象とするclass属性。
316	var $elem = $('img');
317	// 置換の対象とするsrc属性の末尾の文字列。
318	var sp = '_sp.';
319	var pc = '_pc.';
320	// 画像を切り替えるウィンドウサイズ。
321	var replaceWidth = 480;
322
323	function imageSwitch() {
324		// ウィンドウサイズを取得する。
325		var windowWidth = parseInt($(window).width());
326
327		// ページ内にあるすべての`.js-image-switch`に適応される。
328		$elem.each(function () {
329			var $this = $(this);
330			// ウィンドウサイズが768px以上であれば_spを_pcに置換ã

330™ã‚‹ã€‚
331			if (windowWidth >= replaceWidth) {
332				$this.attr('src', $this.attr('src').replace(sp, pc));
333
334				// ウィンドウサイズが768px未満であれば_pcを_spに置換する。
335			} else {
336				$this.attr('src', $this.attr('src').replace(pc, sp));
337			}
338		});
339	}
340	imageSwitch();
341
342	// 動的なリサイズは操作後0.2秒経ってから処理を実行する。
343	var resizeTimer;
344	$(window).on('resize', function () {
345		clearTimeout(resizeTimer);
346		resizeTimer = setTimeout(function () {
347			imageSwitch();
348		}, 200);
349	});
350});
351
352/* !accordionPanel ------------------------------------------------------------ */
353var accordionPanel = function (btnClass, openClass, speed) {
354	$(btnClass).next(openClass).hide().end().not(":animated").toggle(
355		function () { $(this).next(openClass).slideDown(speed); },
356		function () { $(this).next(openClass).slideUp(speed); }
357	);
358};
359
360/* !sp auto tel-link ------------------------------------------------------------ */
361var spAutoTel = function (elemClass, telNumber) {
362	var device = navigator.userAgent;
363	if ((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0) {
364		$(elemClass).wrapInner("<a href=tel:" + telNumber + "></a>");
365	}
366};
367
368/* !isUA -------------------------------------------------------------------- */
369var isUA = (function () {
370	var ua = navigator.userAgent.toLowerCase();
371	indexOfKey = function (key) { return (ua.indexOf(key) != -1) ? true : false; }
372	var o = {};
373	o.ie = function () { return indexOfKey("msie"); }
374	o.fx = function () { return indexOfKey("firefox"); }
375	o.chrome = function () { return indexOfKey("chrome"); }
376	o.opera = function () { return indexOfKey("opera"); }
377	o.android = function () { return indexOfKey("android"); }
378	o.ipad = function () { return indexOfKey("ipad"); }
379	o.ipod = function () { return indexOfKey("ipod"); }
380	o.iphone = function () { return indexOfKey("iphone"); }
381	return o;
382})();