https://nishikoku-shirokuma.clinic/js/jQ.js

1// JavaScript Document
2
3
4// Global ----------------------------------------
5
6const windowWidth = $(window).width(); // ウィンドウ幅取得
7const windowSm = 768; // ブレイクポイント
8
9
10// 電話番号 ----------------------------------------
11
12if (navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)) {
13  $('.tel').each(function() {
14    const 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    const imgPos = $(this).offset().top;
29    const scroll = $(window).scrollTop();
30    const 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').fadeToggle(200);
43  $('#nav #sp_menu').not($(this)).removeClass('close').next('#nav .gnav_subnav').css('display','none');
44  return false;
45});
46$('#nav .sub').click(function() { // 診療内容ドロップダウンメニュー
47  $(this).toggleClass('close').next('#nav .subbox').css('visibility','visible').slideToggle();
48  $('#nav .sub').not($(this)).removeClass('close').next('#nav .subbox').css('display','none');
49  return false;
50});
51$(window).click(function(e) { // エリア外タップでモーダル閉じる
52  if ($('.spnav_modal').is(':visible')) {
53    if(!$(e.target).closest('#nav .gnav_subnav').length) { // タブレット対応
54      $('html, body').removeClass('spnav_modal');
55      $('#nav #sp_menu').removeClass('close');
56      $('#nav .gnav_subnav').fadeToggle();
57    }
58  }
59});
60
61// PCの場合
62 if (windowWidth >= windowSm) {
63 //診療内容処理
64   $(window).click(function(e) { // エリア外タップでモーダル閉じる
65     if ($('#nav .subbox').is(':visible')) {
66       if(!$(e.target).closest('#nav').length) { // タブレット対応
67        $('#nav .sub').removeClass('close');
68       $('#nav .subbox').slideUp(150);
69      }
70    }
71  });
72}
73
74// カレントメニュー処理 ----------------------------------------
75
76$('#nav .current').removeClass('current');
77$('#nav a').filter(function(){
78  return $(this).prop('href')==location.href;
79}).addClass('current');
80
81// トップ　キービジュアル　slick ----------------------------------------
82
83$('#keyvsl').slick({
84  cssEase: 'linear', // 一定速度
85  autoplay: true, // Autoplay
86  autoplaySpeed: 4000, // インターバル
87  speed: 700, // 切替時間
88  arrows: false, // Prev/Next
89  dots: false, // インジケーター
90  fade: true
91});
92$('#keyvsl').delay(50).css('visibility','visible');
93
94// トップ　お知らせ　アコーディオン ----------------------------------------
95
96$('.news_title').slice(0, 3).addClass('open'); // 最新3個は展開
97$('.news_title').click(function() {
98  $(this).toggleClass('open').next('.news_body').slideToggle();
99});
100$('.news_title').keydown(function(evt){ // キーボード操作
101  if (evt.key == 'Enter') { // Enterキーで開閉
102    $(this).toggleClass('close').next('.news_body').slideToggle();
103  }
104});
105
106// クリニック紹介ギャラリー slick ----------------------------------------
107
108$(".gallery_slider").each(function() { // メイン画像
109  $(this).slick({
110    cssEase: 'linear', // 一定速度
111//    autoplay: true, // Autoplay
112//    autoplaySpeed: 5000, // インターバル
113    arrows: true, // Prev/Next
114    dots: true, // インジケーター
115    fade: true,
116    speed: 500, // 切替時間
117    adaptiveHeight: true, // 内容によって高さ可変
118    asNavFor: "#" + $(this).attr("id") + "_nav" // 複数スライド対応
119  });
120});
121$(".gallery_thum").each(function() { // サムネ
122  $(this).slick({
123    slidesToShow: 7,
124    slidesToScroll: 1,
125    centerMode: false,
126    centerPadding: 0,

127    arrows: false, // Prev/Next
128    cssEase: 'linear', // 一定速度
129    focusOnSelect: true, // クリックで切り替え
130    asNavFor: "#" + $(this).attr("id").replace("_nav", ""), // 複数スライド対応
131    responsive: [{
132      breakpoint: 767, // スマホの場合
133      settings: {
134        slidesToShow: 3,
135      },},
136    ]
137  });
138});
139//$('.gallery_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
140//  if ($('.gallery_thum > div').length < 4) { // 枚数が少ない場合の処理
141//      $('.gallery_thum').slick('slickSetOption', 'centerMode', true, true);
142//  }
143//});
144$('.gallery').delay(50).css('visibility','visible');
145
146// スムーズスクロール ----------------------------------------
147
148if (windowWidth < windowSm) { // スマホの場合
149  $('.scr').click(function() {
150    const href= $(this).attr('href');
151    const target = $(href == '#' || href == '' ? 'html' : href);
152    const position = target.offset().top - 20;
153    $('html, body').animate({scrollTop: position}, 500, 'swing');
154    return false;
155  });
156}
157if (windowWidth >= windowSm) { // PCスティッキーヘッダーの場合
158  const highTop = $('.header').height(); // スティッキーヘッダーの高さ取得
159  $('.scr').click(function() {
160    const href= $(this).attr('href');
161    const target = $(href == '#' || href == '' ? 'html' : href);
162    const position = target.offset().top - highTop + 120;
163    $('html, body').animate({scrollTop: position}, 500, 'swing');
164    return false;
165  });
166}
167
168// SPフッター固定　電話・WEb予約・ページアップ ----------------------------------------
169
170$('#pageup').hide();
171$(window).scroll(function () {
172  if ($(this).scrollTop() > 200) {
173    $('#pageup').fadeIn().css('visibility', 'visible');
174  } else {
175    $('#pageup').fadeOut();
176  }
177});
178$('#pageup').click(function() {
179  $('html, body').animate({ scrollTop: 0 }, 500, 'swing');
180  return false;
181});
182
183// アコーディオン ----------------------------------------
184$('.js-acc_tit').click(function() {
185  $(this).toggleClass('open').next('.js-acc_body').slideToggle();
186  });
187  $('.js-acc_tit').keydown(function(evt){ // キーボード操作
188  if (evt.key == 'Enter') { // Enterキーで開閉
189  $(this).toggleClass('open').next('.js-acc_body').slideToggle();
190  }});