コーダーのオッコです。
弊社は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
システム開発はアピステクノロジーへ
アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。
「IT TOOL」をご存じですか？
既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。
さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。
実績多数、低価格で本格的なサイトができると好評いただいております。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら↓
ITツール紹介ページはこちら↓
