本文へスキップ

ドキュメント

ライトボックス

画像とビデオを使ったレスポンシブなライトボックスギャラリーを作成します。

ライトボックスコンポーネントは完全にレスポンシブで、タッチとスワイプによるナビゲーション、デスクトップではマウスドラッグをサポートしています。スライド間をスワイプすると、アニメーションは文字通り指先またはマウスカーソルに追従します。前後のナビゲーションを素早くクリックすると、アニメーションはさらに加速してペースに追いつきます。すべてのアニメーションはハードウェアアクセラレーションされているため、よりスムーズなパフォーマンスを実現します。

使用方法

このコンポーネントを適用するには、コンテナにuk-lightbox属性を追加して、そのコンテナ内のすべてのアンカーをライトボックスリンクに変換します。

<div uk-lightbox>
    <a href="image.jpg"></a>
</div>

Alt属性

ライトボックス内の画像にalt属性を追加するには、アンカーにdata-alt属性を設定します。

<div uk-lightbox>
    <a href="image.jpg" data-alt="Image"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-alt="Image">Open Lightbox</a>
</div>

キャプション

ライトボックスの下部にキャプションを表示するには、アンカーにdata-caption属性を設定します。

<div uk-lightbox>
    <a href="image.jpg" data-caption="Caption"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Caption">Open Lightbox</a>
</div>

アニメーション

デフォルトでは、ライトボックスギャラリーはスライドアニメーションを使用します。別のアニメーションを使用するには、animationオプションを設定します。可能な値はslide、fade、scaleです。

<div uk-lightbox="animation: fade">
    <a href="image.jpg"></a>
</div>
  • スライド
    フェード
    スケール
  • <div class="uk-h3">Slide</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Fade</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: fade">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

<div class="uk-h3">Scale</div>
<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: scale">
    <div>
        <a class="uk-inline" href="images/photo.jpg" data-caption="Caption 1">
            <img src="images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/dark.jpg" data-caption="Caption 2">
            <img src="images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="uk-inline" href="images/light.jpg" data-caption="Caption 3">
            <img src="images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

コンテンツソース

ライトボックスは画像に限定されません。ビデオなどの他のメディアも表示できます。ビデオは表示されていないときは一時停止し、表示されると再開されます。ビデオのポスター画像を表示するには、data-poster属性を設定します。

<div uk-lightbox>
    <a class="uk-button" href="video.mp4" data-poster="image.jpg"></a>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA"></a>
    <a class="uk-button" href="https://vimeo.com/1084537"></a>
    <a class="uk-button" href="https://www.google.com/maps"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="images/photo.jpg" data-caption="Image">Image</a>
    <a class="uk-button uk-button-default" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" data-caption="Video">Video</a>
    <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-caption="YouTube">YouTube</a>
    <a class="uk-button uk-button-default" href="https://vimeo.com/1084537" data-caption="Vimeo">Vimeo</a>
    <a class="uk-button uk-button-default" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" data-caption="Google Maps" data-type="iframe">Google Maps</a>
</div>

注記 YouTubeリンク内でyoutube-nocookie.comを使用すると、ライトボックスはそのドメインを使用してYouTubeビデオを埋め込みます。

手動コンテンツタイプ

ライトボックスは、リンクされたコンテンツのタイプを判断するためにhref属性を使用します。パスにファイル名拡張子が定義されていない場合は、<a>タグにdata-type属性を追加するだけです。

ヒント YouTubeとVimeoのURLは自動的に処理されます。

オプション 説明
data-type="image" コンテンツタイプは画像です。
data-type="video" コンテンツタイプはビデオです。
data-type="iframe" コンテンツタイプは通常のウェブサイトです。

カスタム属性

data-attrs属性を使用して、ライトボックスコンテンツアイテムにカスタム属性を追加できます。属性は通常のコンポーネントオプションのように渡されます。例：data-attrs="width: 1280; height: 720;"

<div uk-lightbox>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-attrs="width: 1280; height: 720;"></a>
</div>
  • <div uk-lightbox>
    <a class="uk-button uk-button-default" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-caption="YouTube" data-attrs="width: 1280; height: 720;">YouTube</a>
</div>

コンポーネントオプション

これらのオプションはコンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
animation 文字列 slide ライトボックスアニメーションモード（slide、fade、scale）。
autoplay ブール値 false ライトボックスの自動再生。
autoplay-interval 数値 7000 自動再生モードでのスライド切り替え間の遅延。
pause-on-hover ブール値 false ホバー時に自動再生モードを一時停止します。
video-autoplay ブール値 false ライトボックスビデオの自動再生。
index 文字列、数値 0 表示するライトボックスアイテム。0ベースのインデックス。
toggle CSSセレクター a トグルセレクター - クリックするとライトボックスパネルが開きます。

JavaScript

JavaScriptコンポーネントの詳細については、こちらをご覧ください。

初期化

// To apply lightbox to a group of links
UIkit.lightbox(element, options);

// To dynamically initialize the lightbox panel
UIkit.lightboxPanel(panelOptions);

メソッド

コンポーネントで使用できるメソッドを以下に示します。

表示

UIkit.lightbox(element).show(index);

ライトボックスのパネルとアイテムを表示します。

非表示

UIkit.lightbox(element).hide();

ライトボックスのパネルを非表示にします。

JS APIを介してライトボックスパネルのみを使用する場合は、次のオプションを設定できます。

オプション 値 デフォルト 説明
animation 文字列 slide ライトボックスアニメーションモード（slide、fade、scale）。
autoplay ブール値 false ライトボックスの自動再生。
autoplay-interval 数値 7000 自動再生モードでのスライド切り替え間の遅延。
pause-on-hover ブール値 false ホバー時に自動再生モードを一時停止します。
video-autoplay ブール値 false ライトボックスビデオの自動再生。
index 数値 0 最初に表示するアイテム。（0ベース）
velocity 数値 2 アニメーション速度（pixel/ms）。
preload 数値 1 プリロードするアイテムの数。（現在アクティブなアイテムの左右）
items 配列 [] 表示するアイテムの配列。例：[{source: 'images/size1.jpg', caption: '900x600'}]
template 文字列 デフォルトマークアップ テンプレート文字列。
delay-controls 数値 3000 コントロールがフェードアウトするまでの遅延時間（ms）。
container 文字列 body セレクターを使用してターゲットコンテナを定義し、DOM内のライトボックスをアペンドする場所を指定します。

イベント

このコンポーネントがアタッチされた要素でトリガーされるイベントを以下に示します。

名前 説明
beforeshow ライトボックスが表示される前に発生します。
beforehide ライトボックスが非表示になる前に発生します。
show ライトボックスが表示された後に発生します。
shown ライトボックスの表示アニメーションが完了した後に発生します。
hide ライトボックスの非表示アニメーションが開始した後に発生します。
hidden ライトボックスが非表示になった後に発生します。
itemload アイテムが読み込まれたときに発生します。
beforeitemshow アイテムが表示される前に発生します。
itemshow アイテムが表示された後に発生します。
itemshown アイテムの表示アニメーションが完了した後に発生します。
beforeitemhide アイテムが非表示になる前に発生します。
itemhide アイテムの非表示アニメーションが開始した後に発生します。
itemhidden アイテムの非表示アニメーションが完了した後に発生します。

メソッド

コンポーネントで使用できるメソッドを以下に示します。

表示

UIkit.lightboxPanel(element).show(index);

ライトボックスのパネルとアイテムを表示します。

名前 タイプ デフォルト 説明
index 文字列、数値 0 表示するライトボックスアイテム。0ベースのインデックス。

非表示

UIkit.lightboxPanel(element).hide();

ライトボックスのパネルを非表示にします。

startAutoplay

UIkit.lightboxPanel(element).startAutoplay();

ライトボックスの自動再生を開始します。

stopAutoplay

UIkit.lightboxPanel(element).stopAutoplay();

ライトボックスの自動再生を停止します。

アクセシビリティ

ライトボックスコンポーネントは、ダイアログ（モーダル）WAI-ARIAデザインパターンとカルーセルWAI-ARIAデザインパターンに準拠しており、適切なWAI-ARIAロール、状態、プロパティを自動的に設定します。

前後のナビゲーションは、ボタンパターンに準拠しています。

閉じるコンポーネントは、適切なWAI-ARIAロールとプロパティを自動的に設定します。

キーボード操作

ライトボックスギャラリーは、次のキーを使用してキーボードからアクセスできます。

国際化

ライトボックスコンポーネントは、次の翻訳文字列を使用します。コンポーネントの翻訳の詳細については、こちらをご覧ください。

キー デフォルト 説明
next 次のスライド 次のスライドボタンのaria-label。
previous 前のスライド 前のスライドボタンのaria-label。
slideLabel %s / %s スライドのaria-label。
close 閉じる 閉じるボタンのaria-label。