slideshow と lightbox を併用する【UIKit】

2023年7月14日

コーダーのオッコです。

弊社はUIKitをコーディングで積極的に取り入れていますが、その要素同士を併用する際に詰まったのでメモとして残します。

やりたかったこと

・商品詳細画面で、複数の画像をuk-slideshowを使って表示。（大きい一枚＋それ以外を小さくサムネイル表示）

・大きい一枚をクリックすると、lightboxで画面いっぱいに画像が表示される。

・画面いっぱいに画像が出ている状態で、左右のナビゲーションボタンで他の画像にスライドできる。

詰まったこと

以下のように書いていたところ、どうしてもlightboxの左右のナビゲーションボタンが表示されなかった。

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade; ratio: 1:1;">
　<ul class="uk-slideshow-items">
　　<li>
　　　<div class="uk-height-1-1"　uk-lightbox>
　　　　<a href="image.png" uk-cover>
　　　　　<img src="image.png" alt="image1">
　　　　</a>
　　　</div>
　　</li>
　　<li>
　　　<div class="uk-height-1-1"　uk-lightbox>
　　　　<a href="image.png" uk-cover>
　　　　　<img src="image.png" alt="image2">
　　　　</a>
　　　</div>
　　</li>
　</ul>

　<ul class="uk-thumbnav">
　　～～サムネイル処理省略～～
　</ul>										</div>

原因

uk-lightboxの位置が悪かった。uk-slideshow-itemsと同じところに書かないとだめでした。

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: fade; ratio: 1:1;">
　<ul class="uk-slideshow-items"　uk-lightbox>
　　<li>
　　　<div class="uk-height-1-1">
　　　　<a href="image.png" uk-cover>
　　　　　<img src="image.png" alt="image1">
　　　　</a>
　　　</div>
　　</li>
　　<li>
　　　<div class="uk-height-1-1">
　　　　<a href="image.png" uk-cover>
　　　　　<img src="image.png" alt="image2">
　　　　</a>
　　　</div>
　　</li>
　</ul>

　<ul class="uk-thumbnav">
　　～～サムネイル処理省略～～
　</ul>										</div>

すぐ分かりそうなものこそ時間かかりがちですよね。

参考↓UIKit 3 Slideshow with Lightbox