https://www.tokyo-satsuki.jp/wp-content/themes/satsuki-hospital/js/scripts.js

1/**
2 * 画像などコンテンツ全体が読み込まれたタイミングで実行される
3 */
4$(window).on('load', function () {
5  console.log("window loaded!");
6
7  // ローディング要素をフェードアウト
8  $('.loader').fadeOut();
9});
10
11
12/**
13 * HTML(DOM)が読み込まれたタイミングで実行される
14 */
15(function () {
16  console.log("document loaded.");
17
18  /**
19   * メニューボタンの開閉
20   * #menu-btn    メニューボタン
21   * #gnav        ナビゲーションメニュー
22   * #bg        ナビゲーションメニューとコンテンツの間に敷く背景
23   */
24
25  $('#menu-btn,#bg').on('click', function (e) {
26    console.log("button clicked.");
27    // イベントをキャンセル
28    e.preventDefault();
29    // クラスのトグル処理
30    $('#menu-btn').toggleClass('menu-btn--open');
31    $('#gnav').toggleClass('gnav--open');
32    $('.header__logo-menu').toggleClass('header__logo-menu--open');
33    $('#bg').toggleClass('bg--open');
34  });
35
36  /* コンバージョンタグ */
37
38  $('a[href="tel:0333088281"]').on('click', function (e) {
39    gtag('event', 'click-satsuki', {
40      'event_category': 'tel-satsuki'
41    });
42  });
43
44  $('a[href="tel:0353149663"]').on('click', function (e) {
45    gtag('event', 'click-yui', {
46      'event_category': 'tel-yui'
47    });
48  });
49
50  $('a[href="tel:0353147081"]').on('click', function (e) {
51    gtag('event', 'click-souzo', {
52      'event_category': 'tel-souzo'
53    });
54  });
55
56
57  var $win = $(window);
58  var windowWidth = $win.width();
59  $win.on('resize', function () {
60    windowWidth = $win.width();
61  });
62  $('.gnav-list__item--parent .gnav-list__link').on('click', function (e) {
63    if (windowWidth < 1024) {
64      e.preventDefault();
65      $(this).toggleClass('gnav-list__link--open');
66    }
67  });
68  /**
69   * ページ内リンクボタン自動生成
70   */
71  var $goto_tareget = $('.post-type-page,.post-type-information,.post-type-blog');
72  if ($goto_tareget.length && $goto_tareget.find('.goto').length && $goto_tareget.find('.h2').length) {
73    $goto_tareget.find('.h2[id]').each(function (number, element) {
74      $goto_tareget.find('.goto').append('<div class="goto__item"><a class="goto__link jumper" href="#' + $(element).attr('id') + '">' + $(element).text() + '</a></div>');
75    });
76  }
77
78  /**
79   * トップへ戻るボタンのクリックイベント
80   */
81  $('#scroller').on('click', function (e) {
82    // イベントをキャンセル
83    e.preventDefault();
84    // アニメーション処理
85    $('html,body').animate({
86        scrollTop: 0 // スクロール位置を0に戻す
87      },
88      1000 // アニメーションさせる時間（ミリ秒）
89    );
90  });
91
92  /**
93   * ページ内リンクのクリックイベント
94   */
95  $(window).on('load', function () {
96    var headerHeight = 130;
97    var url = $(location).attr('href');
98    if (url.indexOf("#") != -1) {
99      var id = url.split("#");
100      var $target = $('#' + id[id.length - 1]);
101      if ($target.length) {
102        var pos = $target.offset().top - headerHeight;
103        $("html, body").animate({
104          scrollTop: pos
105        }, 500);
106      }
107    }
108    $('a[href^="#"]').on('click', function (e) {
109      // イベントをキャンセル
110      e.preventDefault();
111      // アニメーション処理
112      $('html,body').animate({
113          scrollTop: $($(this).attr('href')).offset().top - 130 // 指定idを持った要素のスクロール位置を取得
114        },
115        500 // アニメーションさせる時間（ミリ秒）
116      );
117    });
118  });
119
120
121  /**
122   * ブラウザのスクロール量をチェックしてクラスをトグル
123   * underscore-min.js が必須
124   * https://github.com/jashkenas/underscore
125   */
126  // HTMLが読み込まれたタイミングでチェックする
127  set_fixed();
128  // スクロールイベントを検知してチェックする
129  $(window).on('scroll', _.throttle(set_fixed, 100));
130
131  function set_fixed() {
132    var win = $(window);
133    var scroller = $("#scroller");
134    // ブラウザのスクロール量を確認する
135    if (win.scrollTop() > 500) {
136      scroller.addClass('page-top--fixed');
137    } else {
138      scroller.removeClass('page-top--fixed');
139    }
140  }
141
142  /**
143   * フォトスライダー
144   * slick.min.js が必須
145   * https://github.com/kenwheeler/slick/
146   */
147  $('.photoslider').each(function () {
148    // メインスライダーのクラス名

149    $main = $(this).find('.photoslider-main');
150    // ナビゲーションのクラス名
151    $nav = $(this).find('.photoslider-nav');
152    $main.slick({
153      slidesToShow: 1,
154      slidesToScroll: 1,
155      arrows: true,
156      prevArrow: '<button type="button" class="slick-prev"></button>',
157      nextArrow: '<button type="button" class="slick-next"></button>',
158      fade: true,
159      asNavFor: $nav
160    });
161    $nav.slick({
162      // ナビゲーションを何個表示するか
163      slidesToShow: 4,
164      slidesToScroll: 1,
165      asNavFor: $main,
166      centerMode: false,
167      dots: false,
168      focusOnSelect: true,
169      arrows: false,
170      responsive: [
171        {
172          breakpoint: 768,
173          settings: {
174            slidesToShow: 4
175          }
176              }
177            ]
178    });
179  });
180
181  /**
182   * スクロールされたときにコンテンツを表示する
183   * jquery.inview.min.js が必須
184   * https://github.com/protonet/jquery.inview
185   * 要素に data-delay を設定することで表示の遅延ができる
186   * 例：<div class="lazy" data-delay="500">
187   */
188  $('.lazy').on('inview', function (event, isInView) {
189    if (isInView) {
190      $(this).delay($(this).data('delay')).queue(function () {
191        $(this).addClass('lazy--inview');
192      });
193    }
194  });
195
196  /*
197   * Magnific Popup
198   */
199  $('.gallery').each(function () {
200    $(this).magnificPopup({
201      delegate: 'a',
202      type: 'image',
203      gallery: {
204        enabled: true,
205      },
206    });
207  });
208  $('.lightbox').magnificPopup({
209    type: 'image',
210  });
211})();
212
213/**
214 * Polyfill object-fit
215 * ofi.min.js が必須
216 * https://github.com/bfred-it/object-fit-images
217 */
218objectFitImages();