コーダーのオッコです。
弊社は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ツール紹介ページはこちら↓
あわせて読みたい
アピステクノロジー｜ITツール｜IT導入補助金 アピス販売 美容院予約 家事代行システム | Apice Techn...
アピステクノロジーは2021年度からIT導入支援事業者として採択された、信頼できるシステム開発事業者です。美容院予約システム、レッスン施術予約販売システムサイトなど様...
コメント