slideshow と lightbox を併用する【UIKit】

コーダーのオッコです。

弊社は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

あわせて読みたい

UIKit 3 Slideshow with Lightbox The Slideshow component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops....

システム開発はアピステクノロジーへ

アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。

「IT TOOL」をご存じですか？

既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。

さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。

実績多数、低価格で本格的なサイトができると好評いただいております。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら↓

ITツール紹介ページはこちら↓