https://hibarigaoka-ent.clinic/js/jQ.js

1// JavaScript Document
2
3
4// Global ----------------------------------------
5
6var windowWidth = $(window).width();
7var windowSm = 768; // ブレイクポイント
8
9
10// 電話番号 ----------------------------------------
11
12if (navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)) {
13  $('.tel').each(function() {
14    var str = $(this).html();
15    if ($(this).children().is('img')) {
16      $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
17    } else {
18      $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
19    }
20  });
21}
22
23
24// トリガーで出てくる要素 ----------------------------------------
25
26//$(window).on('scroll load', function(){
27//  $('.anime').each(function(){
28//    var imgPos = $(this).offset().top;
29//    var scroll = $(window).scrollTop();
30//    var windowHeight = $(window).height();
31//    if (scroll > imgPos - windowHeight + windowHeight/5){
32//      $(this).addClass('trigger')
33//    }
34//  });
35//});
36
37
38// Gナビ ----------------------------------------
39
40$('#nav #sp_menu').click(function(){ // SPハンバーガーモーダル
41  $('html, body').toggleClass('spnav_modal');
42  $(this).toggleClass('close').next('#nav .gnav_subnav').css('visibility','visible').slideToggle(200);
43  $('#nav #sp_menu').not($(this)).removeClass('close').next('#nav .gnav_subnav').css('display','none');
44  return false;
45});
46$(window).click(function() {
47  if ($('.spnav_modal').is(':visible')) {
48    $('html, body').removeClass('spnav_modal');
49    $('#nav #sp_menu').removeClass('close');
50    $('#nav .gnav_subnav').slideToggle();
51    $('#nav .subbox').hide();
52  }
53});
54$('#nav .sub').click( function() { // 診療内容ドロップダウンメニュー
55  $(this).toggleClass('close').next('#nav .subbox').css('visibility','visible').slideToggle();
56  $('#nav .sub').not($(this)).removeClass('close').next('#nav .subbox').css('display','none');
57  return false;
58});
59
60// PCの場合　診療内容処理
61if (windowWidth >= windowSm) {
62  $(window).click(function() {
63    if ($('#nav .subbox').is(':visible')) {
64      $('#nav .sub').removeClass('close');
65      $('#nav .subbox').hide();
66    }
67  });
68}
69
70// カレントメニュー処理
71//if (windowWidth >= windowSm) { // PCの場合
72//  var url = window.location.pathname,
73//  urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
74//  $('#nav a').each(function () {
75//    if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
76//      $(this).addClass('current');
77//    }
78//  });
79//}
80
81// トップ　キービジュアル　slick ----------------------------------------
82
83$('#keyvsl').slick({
84  cssEase: 'linear', // 一定速度
85  autoplay: true, // Autoplay
86  autoplaySpeed: 5000, // インターバル
87  speed: 700, // 切替時間
88  arrows: false, // Prev/Next
89  dots: true, // インジケーター
90  fade: true
91});
92$('#keyvsl').delay(50).css('visibility','visible');
93
94
95// トップ　キービジュアル　sliderPro ----------------------------------------
96
97//$('#keyvsl').sliderPro({
98//  width: '100%',
99//  visibleSize: '100%', // 前後のスライドを表示する
100//  forceSize: 'fullWidth',
101//  fade: true,
102//  autoplay: true,
103//  autoSlideSize: true,
104//  autoplayDelay: 5000, // インターバル5秒
105//  slideAnimationDuration: 700 // 切り替わり.7秒
106//});
107
108
109// トップ　キービジュアル　bgswitcher ----------------------------------------
110
111//$('#keyvsl').bgswitcher({
112//  images: [
113//    'img/index_keyvsl01.jpg',
114//    'img/index_keyvsl02.jpg',
115//    'img/index_keyvsl03.jpg',
116//    'img/index_keyvsl04.jpg',
117//    'img/index_keyvsl05.jpg'
118//  ],
119//  interval: 5000,
120//  effect: 'fade'
121//});
122//$('#keyvsl').delay(50).css('visibility','visible');
123
124
125// トップ　キービジュアル　bxSlider ----------------------------------------
126
127//$('#keyvsl').bxSlider({
128//  auto: true,
129//  pause: 5000,
130//  speed: 1000,
131//  mode: 'fade',
132//  controls: false,
133//  pager: false
134//});
135//$('#keyvsl img').delay(50).css('visibility','visible');
136
137
138// トップ　お知らせ　アコーディオン ----------------------------------------
139
140$('.news_title').slice(0, 3).addClass('close'); // 最新3個は展開
141$('.news_title').click(function(){
142  $(this).toggleClass('close').next('.news_body').slideToggle();
143});
144
145
146// カレンダースライド（swiper 非jQuery） ----------------------------------------
147
148//window.onload = function() {
149//  var cal_Swiper = new Swiper ('.swiper-container', {
150//    navigation: { // 次へ・前へボタン
151//      nextEl: '.swiper-button-next',
152//      prevEl: '.swiper-button-prev',
153//    },
154//  })
155//};

156
157
158// カルーセル ----------------------------------------
159
160//var $setElm = $('.loopslider');
161//var slideTime = 25000; // スピード調整：スライド全体一周にかかる秒数（25000 = 25秒で一周）
162//$setElm.each(function(){
163//  var classFilter = $(this).attr('rel'); // 'loopleft' or 'loopright'
164//  var targetObj = $(this);
165//  var loopsliderWidth = targetObj.width();
166//  var loopsliderHeight = targetObj.height();
167//  targetObj.children('ul').wrapAll('<div class='loopslider_wrap'></div>');
168//  var findWrap = targetObj.find('.loopslider_wrap');
169//  var listWidth = findWrap.children('ul').children('li').width();
170//  var listCount = findWrap.children('ul').children('li').length;
171//  var loopWidth = (listWidth)*(listCount);
172//  findWrap.css({
173//    top: '0',
174//    left: '0',
175//    width: ((loopWidth) * 2),
176//    height: (loopsliderHeight),
177//    overflow: 'hidden',
178//    position: 'absolute'
179//  });
180//  findWrap.children('ul').css({
181//    width: (loopWidth)
182//  });
183//  if(classFilter == 'loopleft') {
184//    loopPosLeft();
185//    findWrap.children('ul').clone().appendTo(findWrap);
186//  }
187//  if(classFilter == 'loopright') {
188//    loopPosRight();
189//    findWrap.children('ul').clone().prependTo(findWrap);
190//  }
191//  function loopPosLeft(){
192//    findWrap.css({left:'0'});
193//    findWrap.stop().animate({left:'-' + (loopWidth) + 'px'},slideTime,'linear');
194//    setTimeout(function(){
195//      loopPosLeft();
196//    },slideTime);
197//  }
198//  function loopPosRight(){
199//    var wrapWidth = findWrap.width();
200//    findWrap.css({left:'-' + ((wrapWidth) / 2) + 'px'});
201//    findWrap.stop().animate({left:'0'},slideTime,'linear');
202//    setTimeout(function(){
203//      loopPosRight();
204//    },slideTime);
205//  }
206//});
207
208
209// クリニック紹介ギャラリー slick ----------------------------------------
210
211$(".gallery_slider").each(function() { // メイン画像
212  $(this).slick({
213    cssEase: 'linear', // 一定速度
214//    autoplay: true, // Autoplay
215//    autoplaySpeed: 5000, // インターバル
216    dots: true, // インジケーター
217    fade: true,
218    speed: 500, // 切替時間
219    adaptiveHeight: true, // 内容によって高さ可変
220    asNavFor: "#" + $(this).attr("id") + "_nav" // 複数スライド対応
221  });
222});
223$(".gallery_thum").each(function() { // サムネ
224  $(this).slick({
225    slidesToShow: 7,
226    slidesToScroll: 1,
227    centerMode: true,
228    centerPadding: 0,
229    arrows: false, // Prev/Next
230    cssEase: 'linear', // 一定速度
231    focusOnSelect: true, // クリックで切り替え
232    asNavFor: "#" + $(this).attr("id").replace("_nav", ""), // 複数スライド対応
233    responsive: [{
234      breakpoint: 767, // スマホの場合
235      settings: {
236        slidesToShow: 3,
237      },},
238    ]
239  });
240});
241//$('.gallery_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
242//  if ($('.gallery_thum > div').length < 4) { // 枚数が少ない場合の処理
243//      $('.gallery_thum').slick('slickSetOption', 'centerMode', true, true);
244//  }
245//});
246$('.gallery_slider, .gallery_thum').delay(50).css('visibility','visible');
247
248
249// クリニック紹介ギャラリー sliderPro ----------------------------------------
250
251//$('#clinicslide').sliderPro({
252//  width: 750,
253//  height: 500,
254//  fade: true,
255//  arrows: true,

256//  buttons: false,
257//  fullScreen: false,
258//  shuffle: false,
259//  thumbnailArrows: true,
260//  autoplay: false
261//});
262//$('#clinicslide img, #clinicslide p').delay(50).css('display','block');
263
264
265// スムーズスクロール ----------------------------------------
266
267$('a[href^="#"]').click(function() {
268  let speed = 400;
269  let type = 'swing';
270  let href= $(this).attr("href");
271  let target = $(href == "#index" ? 'html' : href);
272  let position = target.offset().top;
273  $('body,html').animate({scrollTop:position}, speed, type);
274  return false;
275});
276
277
278// $('.scr').click(function(){
279//   const href= $(this).attr('href');
280//   const target = $(href == '#' || href == '' ? 'html' : href);
281//   const highTop = $('#nav').height(); // スティッキーヘッダーの高さ取得
282//   if(windowWidth < windowSm){ // スマホの場合
283//     const position = target.offset().top - 20;
284//     $('html, body').animate({scrollTop: position}, 500, 'swing');
285//   }
286//   if(windowWidth >= windowSm){ // PCスティッキーヘッダーの場合
287//     const positionPC = target.offset().top - highTop - 40;
288//     $('html, body').animate({scrollTop: positionPC}, 500, 'swing');
289//   }
290//   return false;
291// });
292
293// ページアップ単体 ----------------------------------------
294
295// var up = $('#pageup').hide();
296// $(window).scroll(function () {
297//   if ($(this).scrollTop() > 200) {
298//     up.fadeIn();
299//   } else {
300//     up.fadeOut();
301//   }
302// });
303// up.click(function () {
304//   $('html, body').animate({ scrollTop: 0 }, 500, 'swing');
305//   return false;
306// });
307
308
309// SPフッター固定　電話・WEb予約・ページアップ ----------------------------------------
310
311var f_fix = $('#tel_up').hide();
312$(window).scroll(function () {
313  if ($(this).scrollTop() > 200) {
314    f_fix.fadeIn().css('visibility', 'visible');
315  } else {
316    f_fix.fadeOut();
317  }
318});
319$('#pageup').click(function () {
320  $('html, body').animate({ scrollTop: 0 }, 500, 'swing');
321  return false;
322});