The current article

Webサイトなど、HTMLファイルをLightBox風に表示するjQuery

画像をクリックすると大きく表示できるLigthBox系のjqueryは、みなさんお使いのことと思います。
Webサイトなど、HTMLファイルをLightBox風に表示する機会があったので、備忘録的に紹介します。
みなさんも機会があれば、選択肢の一つにいかがでしょうか。

capture

fancyBox

少し古いプラグインになりますが、設定できるオプションも色々あり、画像のポップアップ用に使っても十分役に立つと思います。
画像のグループ化、SWFにも対応していますので、使い勝手は良いですね。
今回は、Webサイト・HTMLファイル用のみの説明となります。

まず、fancyBoxから、右側に「Version 1.3.4 (2010/11/11)」とありますので、クリックしてダウンロードします。
※バージョン2から商用利用が有料となったようなので、今回はVersion 1.3.4を使用しています。
※jquery1.9系では動かない(らしい…)ので、jquery1.8系以下をお使い下さい。

zipファイルを開くと、中に「fancybox」というフォルダがありますので、ご自分のサーバーへアップロードして下さい。(このフォルダだけでOKです。)

jquery本体とCSSとともに読み込ませます。
フォルダには諸々入っていますが、動作させるための必要最小限は、

<html>
  <head>
 ・
 ・
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
  <!--(ここに実行コードを書いていきます。後に説明。)-->
 ・
  </head>
  <body>
  ・
  ・
  ・

という感じでしょうか。

次に実行コードを記入します。
今回は、HTMLを表示させたいので、上記8行目「ここに実行コード・・・」の場所を

<script type="text/javascript">
jQuery("a.iframe").fancybox({
        'width': '75%',
        'height': '75%',
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type' : 'iframe'
});
</script>

に書き換えます。
2行目で、aタグのiframeというクラスに適用。
3,4行目で幅と高さ、8行目でiframeで表示と指定しています。

続いてbody内に、

<body>
 ・
 ・
<ul>
 <li><a class="iframe" href="http://web-pc.net">ホームページ制作のWPC</a></li>
 <li><a class="iframe" href="http://arrivalspace.jp">アライバルスペース</a></li>
</ul>
 ・
 ・
</body>

上記のようにaタグ内にclass="iframe"と記述すれば「ホームページ制作のWPC」「アライバルスペース」というテキストリンクからポップアップが表示されるようになります。 (リスト形式でなくてもOKです)
もちろんテキストを画像に置き換えても動作します。
なお、aタグ内に「title=”WPC”」などと記入すると、ポップアップの下にタイトルが表示されます。

リンク先がポップアップされるので、
簡単なHTMLファイルをサーバーにアップロードしてリンクすると、

画像のような感じにもできます。
ちょっとした説明に使ってみてはいかがでしょうか。

Webサイトなど、HTMLファイルをLightBox風に表示するjQueryのご紹介でした。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。