Javascript

【Javascript】超軽量ライトボックスとギャラリーSimpleBox

September 24, 2017

SimpleBoxは超軽量ライトボックスとギャラリー

Code Examples

イメージをビューボックスに表示する：

  <img data-imageViewer data-target="~/image.png" src="/thumbnail.png" title="Description" />

ビューボックスに画像を表示する：

<a data-imageViewer href="~/image.png" title="Description">
        <img src="~/thumb.png" />
    </a>

ビューボックスでビデオを表示する（youtubeとvimeoをサポート）：

 <a data-imageViewer href="https://noJavascript.Link" data-target="k3tQaWxaLzM" data-type="youtube">
        <img src="~/thumb.png" />
    </a>

ビューボックスにiframeコンテンツを表示する：

    <a data-imageViewer data-type="iframe" data-target="https://www.google.de/" data-thumb="~/loading-thumb.png">
        <img src="~/thumb.png" />
    </a>

読み込まずにiframeコンテンツを表示する：

    <a data-imageViewer data-target="https://www.google.de/">
        <img src="~/thumb.png" />
    </a>

ビューボックスにHTMLコンテンツを表示する：

    <a data-target="#html" data-imageViewer title="4Players">
        <img src="~/thumb.png" />
    </a>
    <div id="html" hidden>
        <span>Hello World!</span>
    </div>

グルーピング（ギャラリーなど）：

    <a data-imageViewer="group1" href="~/image1.png" title="Description 1">
        <img src="~/thumb.png" />
    </a>
    <div data-imageViewer="group1" data-target="~/image2.png" title="Description 2" ></div>
    <div data-imageViewer="group1" data-target="k3tQaWxaLzM" data-type="youtube" title="Description 3" ></div>

MIT

Demo/Download