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

SimpleBoxは超軽量ライトボックスとギャラリー
イメージをビューボックスに表示する:
<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