このエントリーをはてなブックマークに追加

youtube 動画をサムネイルからリンクしてライトボックスで開きたい、画像の拡大もライトボックスで、詳細ページでさらに細かい詳細をポップアップで開きたい、という要望で。
使用したプラグインはEasy FancyBox

動画はリンクタグにclass=”fancybox”を付ける。制作したサイトではMagic Fields で動画のIDのみを入力してもらい、以下のとおり、サムネイルのサイズはCSSで。

<a class="fancybox" href="http://www.youtube.com/watch?v=<?php echo get('movie_id'); ?>"><img class="movie_image" src="http://img.youtube.com/vi/<?php echo get('movie_id'); ?>/0.jpg" alt="<?php echo get('movie_title'); ?>" title="<?php echo get('movie_title'); ?>" /></a>

インライン要素をポップアップで開くには、リンクタグはhref=”#fancyboxID-1″ class=”fancybox” のようにし、開きたい要素は以下のようにして、IDを合わせればOK。

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:400px;height:300px;">~</div></div>

2012.08.18 投稿 2015.04.05 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles