【jQuery】『シンプルなライトボックス』を実装するとてもシンプルな方法
シンプルなライトボックスを実装する方法です。
備忘録的なメモとしてまとめます。
デモは以下のページからどうぞ。
» VenoBox – responsive jQuery modal window plugin
実装手順は以下の2ステップです。
- スクリプトの読み込み。
- HTMLコードを書く。
それではまとめていきます。
1.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>
2.jQueryのライトボックススクリプトのHTMLコードを書く。
<a class="venobox" href="画像ソース">
<img src="画像ソース" alt="image alt"/>
</a>
たったこれだけで完成です( ◜◡ ̄)
ぜひお試しください。
jQuery動かないよーって人は以下を参考にどうぞ。
» jQueryが動かない場合に簡単に動かす方法・手順【初心者向け】