https://fujiair-map.quicktrip.jp/js/main.js

1//スクロールしたら上部固定
2$(function () {
3  var nav = $("#headerfix"),
4    offset = nav.offset();
5  $(window).scrollTop(function () {
6    if ($(window).scrollTop() > offset.top) {
7      nav.addClass("fixed");
8    } else {
9      nav.removeClass("fixed");
10    }
11  });
12});
13
14//トップスライダー
15$(".topslider").slick({
16  autoplay: true, //自動再生
17  speed: 2000, //アニメーションの切り替えスピード
18  fade: true, //スライドの切り替えをフェードに
19  autoplaySpeed: 3000, //自動再生時のスライドの静止時間
20  pauseOnHover: false, //ホバーしても止まらないように
21  pauseOnFocus: false, //フォーカスしても止まらないように
22  dots: false, //スライド下のドット
23  arrows: false, //左右の矢印
24  nextArrow: '<button type="button" class="slick-next">Next</button>',
25  prevArrow: '<button type="button" class="slick-prev">Previous</button>',
26});
27
28//チケット写真のスライダー
29$(function () {
30  $slide = $(".slide");
31  $navigation = $(".slide-navigation .slide-item");
32
33  $slide.slick({
34    //slickスライダー作成
35    infinite: true,
36    slidesToShow: 1,
37    slidesToScroll: 1,
38    arrows: false,
39    fade: true,
40    draggable: false,
41    responsive: [
42      {
43        breakpoint: 992,
44        settings: {
45          dots: true,
46          fade: false,
47        },
48      },
49    ],
50  });
51
52  $navigation.each(function (index) {
53    //サムネイルに連番付与属性
54    $(this).attr("data-number", index);
55  });
56  $navigation.eq(0).addClass("current"); //1枚をオーバーレイ
57
58  $navigation.on("click", function () {
59    //サムネイルクリック時イベント
60    var number = $(this).attr("data-number");
61    $slide.slick("slickGoTo", number, true);
62    $(this).siblings().removeClass("current");
63    $(this).addClass("current");
64  });
65});
66
67//PDF表示のスライダー
68$(".pdfslider").slick({
69  autoplay: false, //自動再生
70  dots: true, //スライド下のドット
71  arrows: false, //左右の矢印
72  infinite: false,
73  slidesToShow: 2,
74  slidesToScroll: 1,
75  responsive: [
76    {
77      breakpoint: 768, // 767px以下のサイズに適用
78      settings: {
79        slidesToShow: 1,
80        dots: true,
81      },
82    },
83  ],
84});
85
86//おすすめチケットのスライダー
87$(".recomendslider").slick({
88  autoplay: false, //自動再生
89  dots: false, //スライド下のドット
90  arrows: false, //左右の矢印
91  infinite: false,
92  slidesToShow: 4,
93  slidesToScroll: 1,
94  responsive: [
95    {
96      breakpoint: 768, // 767px以下のサイズに適用
97      settings: {
98        slidesToShow: 1.15,
99      },
100    },
101  ],
102});
103
104//トピックスカードのスライダー
105$("#topics-list").slick({
106  dots: true, //スライド下のドット
107  arrows: true, //左右の矢印
108  slidesToShow: 4, //表示するスライド数
109  autoplay: true,
110  autoplaySpeed: 4000,
111  responsive: [
112    {
113      breakpoint: 1400,
114      settings: {
115        slidesToShow: 3,
116        centerPadding: "60px",
117      },
118    },
119    {
120      breakpoint: 768, // 767px以下のサイズに適用
121      settings: {
122        slidesToShow: 1,
123        centerPadding: "50px",
124      },
125    },
126  ],
127});
128
129$("#topics-list").on("setPosition", function () {
130  let maxHeight = 0;
131
132  // 1. 一旦高さをautoに戻す（再計算のため）
133  $("#topics-list .slick-slide").css("height", "auto");
134
135  // 2. 一番高いスライドを探す
136  $("#topics-list .slick-slide").each(function () {
137    const h = $(this).outerHeight();
138    if (h > maxHeight) maxHeight = h;
139  });
140
141  // 3. 全スライドに最大の高さを設定
142  $("#topics-list .slick-slide").css("height", maxHeight + "px");
143});
144
145//SNSシェアボタン
146let url = location.href;
147let snsLinks = $(".js-sns-link");
148for (let i = 0; i < snsLinks.length; i++) {
149  let href = snsLinks.eq(i).attr("href");
150  //シェアページのURL上書き
151  href = href.replace("u=", "u=" + url); //facebook
152  href = href.replace("url=", "url=" + url); //X,LINE
153  snsLinks.eq(i).attr("href", href);
154}
155
156// バナー広告
157$("#banner-ad-list").slick({
158  autoplay: true, //自動再生
159  autoplaySpeed: 5000, //自動再生時のスライドの静止時間
160  dots: true, //スライド下のドット

161  arrows: false, //左右の矢印
162  infinite: true,
163  slidesToShow: 4, //表示するスライド数
164  variableWidth: false, //スライドの幅を自動調整
165  responsive: [
166    {
167      breakpoint: 1400,
168      settings: {
169        slidesToShow: 3,
170      },
171    },
172    {
173      breakpoint: 768, // 767px以下のサイズに適用
174      settings: {
175        slidesToShow: 1,
176      },
177    },
178  ],
179});
180
181document.addEventListener("DOMContentLoaded", () => {
182  const parentSelect = document.getElementById("parentSelect");
183  const childSelect = document.getElementById("childSelect");
184
185  const options = {
186    fruits: ["Apple", "Banana", "Orange"],
187    vegetables: ["Carrot", "Broccoli", "Spinach"],
188  };
189
190  parentSelect.addEventListener("change", () => {
191    const selectedCategory = parentSelect.value;
192
193    // Clear previous options
194    childSelect.innerHTML = '<option value="">-- Select an option --</option>';
195
196    if (options[selectedCategory]) {
197      // Enable child select and populate options
198      options[selectedCategory].forEach((item) => {
199        const option = document.createElement("option");
200        option.value = item.toLowerCase();
201        option.textContent = item;
202        childSelect.appendChild(option);
203      });
204      childSelect.disabled = false;
205    } else {
206      // Disable child select if no valid category
207      childSelect.disabled = true;
208    }
209  });
210});
211
212// キャッチコピーのサイズ微調整（最終的に画像内へ強制フィット）
213function fitCatchCopy() {
214  const el = document.getElementById("catch-copy");
215  if (!el) return;
216  const container = el.parentElement;
217  // 画像高さ確定後に評価
218  const maxHeight = container.clientHeight - 16; // 上下余白分
219  let fontSize = parseFloat(getComputedStyle(el).fontSize);
220
221  // 行数が多い場合は字間を詰めるクラス付与
222  if (el.innerText.length > 40) {
223    el.classList.add("tight");
224  }
225
226  // 収まるまでフォントサイズ縮小（下限12px）
227  while (el.scrollHeight > maxHeight && fontSize > 12) {
228    fontSize -= 1;
229    el.style.fontSize = fontSize + "px";
230  }
231}
232
233// 画像読み込み後とリサイズ時に実行
234window.addEventListener("load", () => {
235  fitCatchCopy();
236  // スライダーが高さを変更する可能性があるため遅延再チェック
237  setTimeout(fitCatchCopy, 500);
238});
239window.addEventListener("resize", () => {
240  // 動的リサイズ時は一旦初期サイズへ戻し再計算
241  const el = document.getElementById("catch-copy");
242  if (el) {
243    el.style.fontSize = "";
244  }
245  fitCatchCopy();
246});