https://www.shinzansha.co.jp/js/14/top.js?u=2026031317

1$(function(){
2
3  var mql = window.matchMedia('screen and (max-width: 768px)');
4
5  // ビッグバナー対応
6  if($("#eyecatch").length) {
7    if($("#eyecatch .swiper-slide").length > 1) {
8      // バナー画像が2つ以上 → スライド設定
9      var galleryTop = new Swiper('#eyecatch .swiper-container', {
10        loop: true, // 繰り返し指定
11        centeredSlides : true,
12        autoplay: {
13          // 10秒後に次の画像へ
14          delay: 10000,
15          // ユーザー操作後に自動再生を再開する
16          disableOnInteraction: false
17        },
18        slidesPerView: 1,
19        pagination: {
20          // 円形のページネーションを有効にする
21          el: "#eyecatch .swiper-pagination",
22          // クリックを有効にする
23          clickable: true
24        },
25        navigation: {
26          nextEl: '#eyecatch .swiper-button-next',
27          prevEl: '#eyecatch .swiper-button-prev',
28        }
29      });
30    } else {
31      // バナー画像が1つ → 静的な
32      $("#eyecatch").addClass('static');
33    }
34  }
35
36  // おすすめ書誌 スライド
37  if($("#pickup").length) {
38    if($("#pickup .swiper-slide").length > 1) {
39      // バナー画像が2つ以上 → スライド設定
40      var pickup = new Swiper('#pickup .swiper-container', {
41        loop: true, // 繰り返し指定
42        centeredSlides : true,
43        autoplay: {
44          // 10秒後に次の画像へ
45          delay: 10000,
46          // ユーザー操作後に自動再生を再開する
47          disableOnInteraction: false,
48          pauseOnMouseEnter: true
49         },
50        effect: "coverflow",
51        grabCursor: true,
52        coverflowEffect: {
53          rotate: 20,
54          stretch: 0,
55          depth: 200,
56          modifier: 1,
57          slideShadows: true,
58        },
59        slidesPerView: 4,
60        pagination: {
61          // 円形のページネーションを有効にする
62          el: "#pickup .swiper-pagination",
63          // クリックを有効にする
64          clickable: true
65        },
66        navigation: {
67          nextEl: '#pickup .swiper-button-next',
68          prevEl: '#pickup .swiper-button-prev',
69        },
70        breakpoints: {
71          768: {
72            slidesPerView: 3,
73          },
74          480: {
75            slidesPerView: 2.5,
76          }
77        }
78      });
79
80      // スライドの画像の読み込みが完了した
81      $(window).on('load', function () {
82        // .image の高さを最大の高さに合わせる → テキスト部分が隣の書影にかぶるため
83        // → 実際は .content の margin-top を調整する
84        // 高さの最大値取得。加えて 全体の高さも設定する。
85        var mh = getHeight();
86
87        // 高さの最大値によって margin-topを設定 → カレントと両端のみ
88        setMargin(mh);
89
90        // 画面サイズが変わった → 最大サイズ 再取得
91        pickup.on('resize', function () {
92          // 高さ 再取得。加えて 全体の高さも設定する。
93          mh = getHeight();
94          // 高さの最大値によって margin-topを設定 → カレントと両端のみ
95          setMargin(mh);
96        });
97
98        // スライドが切り替わった
99        pickup.on('slideChange', function () {
100          // 高さの最大値によって margin-topを設定 → カレントと両端のみ
101          setMargin(mh);
102        });
103
104        /**
105         * [getHeight 高さの最大値を取得。加えて 全体の高さも設定する。]
106         * @return {[int]} [高さの最大値]
107         */
108        function getHeight() {
109          var mh = 0;
110          var ih = 0;
111          $("#pickup .swiper-slide").each(function(){
112            if(mh < $(this).find('.image img').height()) {
113              mh = $(this).find('.image img').height();
114            }
115            $(this).addClass('temporary');
116            if(ih < $(this).height()) {
117              ih = $(this).height();
118            }
119            $(this).removeClass('temporary');
120
121            // 全体の高さ設定
122            // → スライドが切り替わった際に高さがガタガタするのを防ぐ
123            changeHeight();
124
125            mql.addEventListener('change', function() {
126              changeHeight();
127            })
128            function changeHeight(){
129              if(mql.matches){
130                $("#pickup .inner").height(ih + 35);
131              }else{
132                $("#pickup .inner").height(ih + 50);
133              }
134            }
135          });
136
137          return mh;
138        }
139
140        /**
141         * [setMargin 高さの最大値によって margin-topを設定 → カレントと両端のみ]
142         * @param {[int]} mh [高さの最大値]
143         */
144        function setMargin(mh) {
145          // カレントのindex取得
146          var index = $("#pickup .swiper-slide.swiper-slide-active").index();
147
148          // カレントの.imageの高さを取得し、.contentのmargin-topの値を計算して設定
149          // → 左右ボタンでの切り替え、ドラッグでの切り替えによって
150          // イベント発火時点のカレントが違うため 両端の値を設定する
151          // → すべて一度に設定しようとすると .imageの高さが0のものがあるため難しい
152          var mt = mh - $("#pickup .swiper-slide:eq(" + index +") .image").height();
153          $("#pickup .swiper-slide:eq(" + index +") .content").css('marginTop',mt);
154
155          mt = mh - $("#pickup .swiper-slide:eq(" + (index - 1) +") .image").height();
156          $("#pickup .swiper-slide:eq(" + (index - 1) +") .content").css('marginTop',mt);
157
158          mt = mh - $("#pickup .swiper-slide:eq(" + (index + 1) +") .image").height();
159          $("#pickup .swiper-slide:eq(" + (index + 1) +") .content").css('marginTop',mt);
160        }
161      });
162    } else {
163      // 書誌が1つ → 静的な
164      $("#pickup").addClass('static');
165    }
166  }
167
168  // トップ新刊情報: スマホで著者が4名以上の場合に「ほか」を追加する処理
169  addAuthorText();
170
171  mql.addEventListener('change', function() {
172    addAuthorText()
173  })
174
175  function addAuthorText(){
176    $('#main_column .listType1 ul li').each(function(){
177      var nHeight = $(this).find('.newbookInfo').height();
178      var nTxtHeight = $(this).find('.newbookInfo .txt').height();
179      var t = $(this).find('.newbookInfo .txt .author span');
180      if(mql.matches && t.length > 4){
181        $(this).find('.newbookInfo .txt .author').append('<span class="txtOther">ほか</span>');
182      }else{
183        $(this).find('.newbookInfo .txt .author .txtOther').remove();
184      }
185      if(!mql.matches && nHeight < nTxtHeight){
186        $(this).find('.newbookInfo').addClass('yScroll');
187      }else{
188        $(this).find('.newbookInfo').removeClass('yScroll');
189      }
190    })
191  }
192
193});