動画、インライン要素をライトボックスで

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

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>