前回の画像が拡大表示されるcolorboxに続いて、動画の画像が拡大表示されそのまま閲覧出来るcolorboxを紹介します。
こちらも簡単に設置できて使いやすいのでおススメです。
プラグインのダウンロード
下記サイトからcolorboxのプラグインをダウンロードし、
colorbox.cssとjquery.colorbox-min.js、imagesを任意の場所に置く。
(imagesには画像を拡大表示した時に必要な画像が入っています）
必要なファイルを読み込む
下記3つをHTMLに読み込みます。
- colorbox.css
- jQuery
- jquery.colorbox-min.js
<link rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>JavaScriptを記述
<script>
$(document).ready(function(){
$(".youtube").colorbox({
iframe:true,
innerWidth:854,
innerHeight:480
});
});
</script>HTML
<a href="https://www.youtube.com/embed/2YXDd_NKhac?rel=0" class="youtube" title=""><img src="images/img02.jpg" alt="colorbox動画 画像" width="300" height="169"></a>画像がある場所によっては、colorbox.cssの画像指定のパスを書き換える必要があります。
他にもいろいろオプションが用意されているようです。
下記公式サイトを参考にカスタマイズしてみるのもいいかもしれません。
コメント