|
|---|
jQueryは、javascriptのライブラリです。
jQueryにプラグインとなるjavascriptと組み合わせることで、javascriptを詳しく知らなくても
さまざまなことを簡単にできます。
fancyboxは、jQueryのプラグインです。
jQuery本体は、ここにあります。
使うだけなら、Current ReleaseにあるMinifiedというところをクリックしてダウンロードします。
fancyboxは、ここからダウンロードします。
解凍するとfancyboxというフォルダ内に、画像ファイルやcss、javascriptのファイルが一緒に入っています。lightboxと同様に別々のフォルダに入れて動くようにしようと、cssの画像ファイルのパスを変更したのですがどうもうまくいかない。
あれこれとやってるうちに、jquery.fancybox-1.3.1.css内のDXImageTransform.Microsoft.AlphaImageLoaderというところは、cssからの相対パスではなく、htmlファイルからの相対パスを入れなければいけないようでした。
同じ階層なら問題ないけど、もし別の階層で使おうと思ったら問題があります。
仕方ないのでDXImageTransform～と書いてあるところと、それ以外を別のcssファイルにして、DXImageTransform～のパスを変更したファイルを複数作って、そのファイル内でimportを使ってcssファイルをインポートすればいいのかなぁと。
つまりこんな感じです。
１．ファイルをDXImageTransform～以外の部分(Aとする)、DXImageTransform～の記述部分(Bとする)に分ける。
２．ファイルパスを変更したBのファイルを複数個つくる。
３．Bのファイル内でAのファイルをimportする。
４．使う側では、階層に対応するBのファイルを使う。
もっといい改造方法がありそうだけど。
importは、cssファイル内で、@import "subs.css";
と書きます。
fancyboxの使い方は、
head要素の内容に
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="../css/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("area#fancybox").fancybox();
$("a#fancybox").fancybox();
});
</script>
というのを追加します。パスは実際のファイルパスです。
aを使って表示するだけならa#id名
クリッカブルマップを使う場合は、area#id名というのを記述します。
表示させたいところに記述したid名を記述します。こんな感じです。
<area shape="rect" coords="17,15,162,50" href="images/kosagi.jpg" id="fancybox" title="瀬戸内海の島です。" alt="瀬戸内海の島です。" />
出来たのはこんな感じです。
idを使うので複数画像を表示する場合は、複数記述しなければならないのが面倒です。
(とおりすがりさんのコメントを参考にしてコードを変えました。)
ただ表示自体は、こちらの方なんとなく軽い印象があります。
今回は、これを使って課題を作成します。
この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。
>idを使うので複数画像を表示する場合は、
>複数記述しなければならないのが面倒です。
かなり柔軟に指定できますよ。それが気に入って別のプラグインからの移行作業中です。
例えば
$("a[href$=.jpg]").fancybox();
と書けばjpgへのリンクすべてにまとめて適用できますし、
$("a[href*=youtube]").fancybox();
と書けばyoutube動画のリンクすべてに適用できます（urlにyoutubeを含むもの、という乱暴な指定なのでもうちょっとまじめに書いたほうがいいですが）。
配布元のTips & Tricksやhttp://semooh.jp/jquery/とかを参考にすれば、ちょこっとJavaScriptをかじった程度でもいろいろ拡張できます。
APIにcallback関数を放り込むところも用意されてるあたり、至れり尽くせりで感動的です。
by とおりすがり (2010-05-05 01:36)
コメントありがとうございます。
JQueryは、全然勉強してないのでちょっとやりたかったことを調べて作ってみただけでした。
書かれていたことを参考に、クリッカブルマップで表示できるように
"area[id*=fancybox]"というのを書いて出来るようにしました。
ワイルドカード指定ができるのは便利でいいですね。
勉強になりました。
by tomomosan (2010-05-08 17:11)