gallerifficを使ってサムネイル付きギャラリーを作成していますが
メイン画像の矢印で次の画像に移っていくとサムネがスクロール連動していないのでアクティブなサムネが隠れてしまいます
アクティブになったサムネに合わせて自動でスクロールするのは可能でしょうか
検索するとスクロールに合わせて〇〇～というのしか出てきませんでした

html
1<div class="detail_img_inner">
2	<div id="gallery" class="content">
3		<div id="nav" class="controls"></div>
4		<div class="slideshow-container">
5			<div id="loading" class="loader"></div>
6			<div id="slideshow" class="slideshow"></div>
7		</div>
8	</div>
9	<div id="thumbs" class="navigation">
10		<ul class="thumbs noscript scrollbar scrollbar-primary">
11			<li>
12				<a class="thumb" href="img/1.jpg"><img src="img/1.jpg" alt="" />1</a>
13			</li>
14			<li>
15				<a class="thumb" href="img/2.jpg"><img src="img/2.jpg" alt="" />2</a>
16			</li>
17			<li>
18				<a class="thumb" href="img/3.jpg"><img src="img/3.jpg" alt="" />3</a>
19			</li>
20		</ul>
21	</div>
22	<div style="clear: both;"></div>
23</div>

css
1.detail_img_inner {
2  display: -webkit-box;
3  display: -ms-flexbox;
4  display: flex;
5  -webkit-box-orient: horizontal;
6  -webkit-box-direction: reverse;
7      -ms-flex-flow: row-reverse;
8          flex-flow: row-reverse;
9  -webkit-box-pack: center;
10      -ms-flex-pack: center;
11          justify-content: center;
12}
13
14#gallery.content {
15  display: none;
16  float: right;
17  width: 550px;
18  width: 60%;
19  height: auto;
20  display: block;
21  float: none;
22  position: relative;
23}
24
25div.slideshow-container {
26  position: relative;
27  clear: both;
28  height: auto;
29}
30
31div.slideshow img {
32  vertical-align: middle;
33  border: none;
34  width: auto;
35}
36
37#loading.loader {
38  position: absolute;
39  top: 0;
40  left: 0;
41  background-image: url(loader.gif);
42  background-repeat: no-repeat;
43  background-position: center;
44  width: 100%;
45  height: auto;
46}
47
48ul.thumbs img {
49  border: none;
50  display: block;
51  margin: 0 auto 2px auto;
52}
53
54div.nav-controls {
55  float: none;
56}
57
58div.slideshow a.advance-link {
59  display: block;
60  width: 550px;
61  height: auto;
62  text-align: center;
63  line-height: normal;
64  width: auto;
65}
66
67#thumbs.navigation {
68  float: none;
69  width: 38%;
70  margin-right: .5%;
71  background: #f7f3ef;
72  position: relative;
73  text-align: center;
74  padding: 1%;
75  overflow: hidden;
76}
77
78ul.thumbs li.selected a.thumb {
79  background: #ffffff;
80  -webkit-box-shadow: 0 0 0 3px #f3cd64 inset;
81          box-shadow: 0 0 0 3px #f3cd64 inset;
82  border: 1px solid #f3cd64;
83}
84
85ul.thumbs {
86  clear: both;
87  width: 100%;
88  display: -webkit-box;
89  display: -ms-flexbox;
90  display: flex;
91  -webkit-box-orient: horizontal;
92  -webkit-box-direction: normal;
93      -ms-flex-flow: row wrap;
94          flex-flow: row wrap;
95  -webkit-box-pack: start;
96      -ms-flex-pack: start;
97          justify-content: flex-start;
98  position: relative;
99  height: 100%;
100  overflow-y: scroll;
101}
102
103.scrollbar-primary::-webkit-scrollbar {
104  width: 12px;
105  background-color: #fff;
106  border-radius: 5px;
107}
108
109.scrollbar-primary::-webkit-scrollbar-thumb {
110  border-radius: 10px;
111  background-color: #f3cd64;
112}
113
114ul.thumbs li {
115  float: left;
116  padding: 0;
117  margin: 4px 3px 4px 3px;
118  list-style: none;
119  width: calc(34% - 6px - 1%);
120}
121
122div.navigation div.top, div.navigation div.bottom {
123  height: 25px;
124  display: -webkit-box;
125  display: -ms-flexbox;
126  display: flex;
127  margin: 25px 0 12px 0;
128}
129
130div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
131  display: block;
132  margin-right: 2px;
133  padding: 4px 7px 2px 7px;
134  border: 1px solid #ccc;
135  height: 31px;
136  display: -webkit-box;
137  display: -ms-flexbox;
138  display: flex;
139  -webkit-box-align: center;
140      -ms-flex-align: center;
141          align-items: center;
142  float: none;
143}
144
145.pagination_wrap {
146  display: -webkit-box;
147  display: -ms-flexbox;
148  display: flex;
149  -webkit-box-pack: center;
150      -ms-flex-pack: center;
151          justify-content: center;
152  height: 50px;
153}
154
155div.controls {
156  margin-top: 0;
157  height: 0;
158}
159
160.nav-controls a:nth-child(1) {
161  position: absolute;
162  top: 50%;
163  left: 2%;
164  width: 60px;
165  background: #a9927b;
166  height: 60px;
167  z-index: 2;
168  -webkit-transform: translateY(-50%);
169          transform: translateY(-50%);
170  border-radius: 1em;
171  -webkit-transition: .5s;
172  transition: .5s;
173  opacity: .8;
174}
175
176.nav-controls a:nth-child(1)::before {
177  content: "";
178  width: 100%;
179  height: 100%;
180  display: block;
181  top: 0;
182  left: 0;
183  background-image: url(left.svg);
184  background-repeat: no-repeat;
185  -webkit-transform: rotate(180deg);
186          transform: rotate(180deg);
187  position: absolute;
188  background-size: 45%;
189  background-position: center,center;
190}
191
192.nav-controls a:nth-child(2) {
193  position: absolute;
194  top: 50%;
195  right: 2%;
196  width: 60px;
197  background: #a9927b;
198  height: 60px;
199  z-index: 2;
200  -webkit-transform: translateY(-50%);
201          transform: translateY(-50%);
202  border-radius: 1em;
203  -webkit-transition: .5s;
204  transition: .5s;
205  opacity: .8;
206}
207
208.nav-controls a:nth-child(2)::before {
209  content: "";
210  width: 100%;
211  height: 100%;
212  display: block;
213  top: 0;
214  left: 0;
215  background-image: url(left.svg);
216  background-repeat: no-repeat;
217  position: absolute;
218  background-size: 45%;
219  background-position: center,center;
220}
221
222.nav-controls a:nth-child(1):hover, .nav-controls a:nth-child(2):hover {
223  background: #a9927b;
224  -webkit-transition: .5s;
225  transition: .5s;
226}
227
228div.pagination a {
229  background: #FFF;
230}
231
232div.pagination span.current {
233  font-weight: bold;
234  background-color: #6f6255;
235  border-color: #6f6255;
236  color: #fff;
237}
238
239div.navigation div.bottom {
240  margin-top: 10px;
241  bottom: 10px;
242}
243
244a.thumb {
245  padding: 6px 4px 2px 4px;
246  display: block;
247  border: 1px solid #c3bbb3;
248  background: #FFF;
249}
250
251div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
252  display: block;
253  margin-right: 2px;
254  padding: 5px 10px 4px 10px;
255  border: 1px solid #6f6255;
256  height: 31px;
257  display: -webkit-box;
258  display: -ms-flexbox;
259  display: flex;
260  -webkit-box-align: center;
261  -ms-flex-align: center;
262  align-items: center;
263  float: none;
264  border-radius: 5em;
265  margin: 0 3px;
266}
267
268div.pagination a:hover {
269  background-color: #f5eadf;
270  text-decoration: none;
271}
272
273.bottom.pagination a {
274  font-size: 1em;
275}
276
277div.pagination a {
278  background: #FFF;
279}
280
281div.slideshow span.image-wrapper {
282  display: block;
283  position: absolute;
284  top: 0;
285  left: 0;
286  border: 1px solid #ceb9a4;
287  padding: 5px;
288  width: 100%;
289}
290
291div.pagination span.current {
292  font-weight: bold;
293  background-color: #6f6255;
294  border-color: #6f6255;
295  color: #fff;
296}
297
298div.content a, div.navigation a {
299  text-decoration: none;
300  color: #333;
301  font-size: .8em;
302  line-height: 18px;
303}
304@media screen and (max-width: 880px) {
305.detail_img_inner {
306    display: block;
307    height: auto !important;
308  }
309  #gallery.content {
310    width: 100%;
311    margin: 0 auto;
312  }
313  .nav-controls a:nth-child(1) {
314    width: 12%;
315    left: 2%;
316  }
317  .nav-controls a:nth-child(2) {
318    width: 12%;
319    right: 2%;
320  }
321  #thumbs.navigation {
322    float: none;
323    width: 100%;
324    margin-right: 0;
325    background: #f7f3ef;
326    position: static;
327    text-align: center;
328    padding: .5%;
329    display: block;
330    margin: 2.5em 0 0 0;
331  }
332  ul.thumbs {
333    display: -ms-flexbox;
334    display: -webkit-box;
335    display: flex;
336    -webkit-box-orient: vertical;
337    -webkit-box-direction: normal;
338        -ms-flex-flow: unset;
339            flex-flow: unset;
340    overflow-x: scroll;
341    overflow-y: unset;
342  }
343  ul.thumbs li {
344    width: calc(25% - 10px);
345    margin: 4px 4px 10px 6px;
346    -webkit-box-flex: 0;
347        -ms-flex: 0 0 100px;
348            flex: 0 0 100px;
349    min-width: 80px;
350  }
351  ul.thumbs img {
352    border: none;
353    display: block;
354    width: 100px;
355  }
356  }

javascript
1var gallery = $('#thumbs').galleriffic({
2      delay : 4000,
3      defaultTransitionDuration : 500,
4      numThumbs:                 50,
5      preloadAhead:              50,
6      enableTopPager:            false,
7      enableBottomPager:         false,
8      maxPagesToShow:            7,
9      imageContainerSel:         '#slideshow',
10      ssControlsContainerSel:    '#controls',
11      navControlsContainerSel:   '#nav',
12      captionContainerSel:       '#caption',
13      loadingContainerSel:       '#loading',
14      renderSSControls:          false,
15      renderNavControls:         false,
16      enableHistory:             false,
17      autoStart:                 false,
18      syncTransitions:           true
19    });

Lhankor_Mhy

2020/07/13 07:45

galleriffic とはプラグインだと思いますが、そのコードとドキュメントがあるページを教えてください。

hati3693

2020/07/13 07:54

GitHubでは削除されていたので別のところからダウンロードしました。 http://www.java2s.com/Open-Source/Javascript_Free_Code/Photo/Download_galleriffic_Free_Java_Code.htm サイトはここを参考にしました。 https://memocarilog.info/jquery/1396

Lhankor_Mhy

2020/07/13 08:26

Bootstrap を使っていますか？

hati3693

2020/07/13 08:33

いいえ使っておりません。文字制限のためgallerifficに入っていない自分で追加したCSSのみ記載いたしました。

Lhankor_Mhy

2020/07/14 01:52

ご提示のコードを試してみましたが、そもそも galleriffic が上手く動作しませんでした。おそらく、ここに提示されていない部分のコードに差異があるのだろうと思いますので、調べてみてますが、時間がかかるのではないかと思いました。

Lhankor_Mhy

2020/07/14 01:55

よく見ると、ダウンロードした examples フォルダにあるサンプルも動作していないようです。環境の問題でしょうか？これは、なかなか大変そうですね……

hati3693

2020/07/14 02:22

すみません、最初にダウンロードした場所がわからず別のページをご紹介したので、内容が違ったのかもしれません・・。 https://34.gigafile.nu/0728-cfcdea46b7beb1557942373078fe06bc1 いらないところを省いたファイルをまとめてお送りいたします。最初からこうすればよかったですね、すみません・・多分これなら画像通りに動くはずです。よろしくお願いします。。

Lhankor_Mhy

2020/07/14 02:43

わざわざご準備いただいてすみません。

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示のページを拝見したところ、オプションのonSlideChangeがスライドを変更した時のコールバックの様でしたので、これを使うのがいいと思いました。

js
1      onSlideChange: function(prevIndex, nextIndex) {
2        this.find("li")[nextIndex].scrollIntoView();
3      },

動作確認済みです。

参考：
Element.scrollIntoView() - Web API | MDN

IE11非対応になりますが、.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"})とした方がかっこいいかもしれません。

コメントを受けて追記

下記、IE11で動作確認しました。

js
1      onSlideChange: function(prevIndex, nextIndex) {
2        this.children().scrollTop(this.children().scrollTop()+this.find("li:eq("+nextIndex+")").position().top);
3      },

投稿2020/07/14 03:18

編集2020/07/14 04:05

Lhankor_Mhy

総合スコア36960

hati3693

2020/07/14 03:26

ありがとうございます。まさに求めていた通りの動作です！ただ一点、オーバーフロー内のスクロールとページ全体のスクロールがダブルでスクロールされてしまい、サムネにつられてどんどんページが下がってしまう時があるのですが（IEのみ？）全体のスクロールは含まないように設定は可能なんでしょうか…？

Lhankor_Mhy

2020/07/14 03:38

追記した「IE11非対応」の方であれば、ある程度軽減されると思いますが、いかがですか？

Lhankor_Mhy

2020/07/14 03:38

あ、IEなんですね……

hati3693

2020/07/14 03:46

一応各ブラウザで試しておこうと思いまして・・・ chromeとfirefoxでは理想通りの動きで、edgeとIEでは13枚目らへんから絶望的な感じに… edgeとIEだけいっそこの表記を外したりなんかはできたりしますでしょうか…

Lhankor_Mhy

2020/07/14 04:09

https://gs.statcounter.com/ ↑IEとレガシーEdgeを足しても、シェア率3%です！　思い切って対応をやめてしまいましょう！ --- 対応策を追記しました。

hati3693

2020/07/14 04:19

ありがとうございます。全ブラウザで動きました！ IEの対応ぜひともやめたいんですけども…上層部がIEを使ってまして… iphoneのsafari以外の一部ブラウザではうまく連動しないのもあったのですが、IEみたいに画像が見れないわけではないので全然大丈夫でした！ Lhankor_Mhy様、本当にありがとうございます！

Lhankor_Mhy

2020/07/14 04:22

>上層部がIEを使ってまして… わかります……

hati3693

2020/07/14 04:24

ほかにも会社で使っている一部サービスがIEでしか動かないとかまだまだIE離れができなそうです・・・

行動規範の内容に同意します