The current article
Webサイトなど、HTMLファイルをLightBox風に表示するjQuery
画像をクリックすると大きく表示できるLigthBox系のjqueryは、みなさんお使いのことと思います。
Webサイトなど、HTMLファイルをLightBox風に表示する機会があったので、備忘録的に紹介します。
みなさんも機会があれば、選択肢の一つにいかがでしょうか。
capture
少し古いプラグインになりますが、設定できるオプションも色々あり、画像のポップアップ用に使っても十分役に立つと思います。
画像のグループ化、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のご紹介でした。
関連記事
