情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・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>