2014/07/23 (更新日: 2017/11/10)

【jQuery】『シンプルなライトボックス』を実装するとてもシンプルな方法

JavaScript PROGRAMMING

シンプルなライトボックスを実装する方法です。
備忘録的なメモとしてまとめます。

デモは以下のページからどうぞ。
» VenoBox – responsive jQuery modal window plugin

実装手順は以下の2ステップです。

1. スクリプトの読み込み。
2. HTMLコードを書く。

それではまとめていきます。

１．jQueryのライトボックススクリプトの読み込み。

<!-- jQueryを読み込む -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- ライトボックスプラグインを読み込む -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

	/* default settings */
	$('.venobox').venobox(); 


	/* open content with custom settings */
	$('.venobox_custom').venobox({
		framewidth: '300px',
		frameheight: '250px',
		border: '6px',
		bordercolor: '#ba7c36',
		numeratio: true,
		infinigall: true
	});

	/* auto-open #firstlink on page load */
	$("#firstlink").venobox().trigger('click');
});
</script>

２．jQueryのライトボックススクリプトのHTMLコードを書く。

<a class="venobox" href="画像ソース">
	<img src="画像ソース" alt="image alt"/>
</a>

たったこれだけで完成です( ◜◡￣)
ぜひお試しください。

jQuery動かないよーって人は以下を参考にどうぞ。
» jQueryが動かない場合に簡単に動かす方法・手順【初心者向け】

※参考記事
» VenoBox – responsive jQuery modal window plugin

JavaScript

• Tweet
• LINE
• Read Later