先日、大学での活動の紹介ページをリデザインしました。

今回のプラグインはそこで使ったjQueryプラグインです。

っていうシリーズPart2。

前回に引き続き、リデザインするときに使ったjQueryプラグインです。

過去記事：あっという間にスライダーを設置！jQueryプラグインのbxsliderを使いました。

もうひとつ使ったプラグインは、fancyboxです。

参考記事：

Webサイトなど、HTMLファイルをLightBox風に表示するjQuery – ホームページ制作やリニューアル印刷物デザインなら大阪のWPC

Fancyboxでiframeの高さをコンテンツにあわせてみたり | ちゅんもす置き場

どの辺がファンシーなのって思ってたそのバチが当たったのか色々手こずりました。

fancybox

Lightbox系のプラグインで、画像をクリックすると拡大表示したり、同時に画像のtitleを表示できたりするプラグインです。

Fancybox – Fancy jQuery lightbox alternative

ちなみに画像だけじゃなく、テキストも表示できるようです。

使い方

今回使った用途としては、タイトルのようなものを用意し、それをクリックするとそれの細かい内容をfancyboxで表示するというものでした。

まずは、ホームページ右上のリンクからファイルをダウンロードします。

Fancybox – Fancy jQuery lightbox alternative

今回は、メンテナンス性を考えてiframで別ファイルから読み込んで表示させることにしました。

HTML

<link rel="stylesheet" href="css/jquery.fancybox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>

以上をhead内に記述します。

更に、fancyboxで表示する為にクリックする要素を、aタグで囲みます。

<a href="別のhtmlファイル" class="sample">
<p>ここに何か</p>
</a>

JavaScript

<script>
  $(document).ready(function() {
    $("a.sample").fancybox({});
  });
</script>

body閉じタグ前に記述します。

更に、オプションを加える事ができるので、こう記述してみました。

<script>
  $(document).ready(function() {
    $("a.sample").fancybox({
      'type'          : 'iframe',
      'transitionIn'  : 'elastic',
      'transitionOut' : 'elastic',
      'width'         : '480',
      'autoScale'     : false,
      'scrolling'     : 'no',
      'onComplete'      : function () {
        $('#fancybox-frame').load(function(){
          $('#fancybox-content').height($(this).contents().find('body').height()+50);
          $('#fancybox-overlay').height($(document).height());
        });
      }
    });
  });
</script>

色んなサイトの記述を参考にしました。

色々なカスタマイズができるので表現の幅が広くていいプラグインだと思います。