jQuery

【jQuery】様々なタイプのコンテンツを表示するレスポンシブライトボックスプラグインLightcase

September 12, 2016
lightcase

Lightcaseはウェブサイト上のさまざまなメディアフォーマットを表示する、柔軟で拡張可能なレスポンシブライトボックスプラグイン。

CSS&JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/lightcase.css">
<script type="text/javascript" src="path/to/lightcase.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('a[data-rel^=lightcase]').lightcase();
	});
</script>

HTML

<a href="path/to/media.jpg" data-rel="lightcase">Your link description or thumb</a>

APIも沢山あります。詳しくはプラグインページでご確認下さい。

画像の他にも色々と表示できるようです。

  1. Inline
  2. Ajax Form
  3. Iframe
  4. Swf
  5. HTML5 Video
  6. Vimeo as Iframe
  7. Youtube Video as Iframe
  8. Youtube Video as Flash
  9. Google Maps
  10. Not found…
  11. On the fly

Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9+をサポート。
GPLライセンス