2010.04.11

PopBox Mac的メモ

PoweredByPopBox2
サムネイル画像をポップアップで拡大表示してくれるjavascript、 PopBox を使ってみたので、作者さまの宣伝↑。
javascriptはチンプンカンプンなんですが、素晴らしい使い方サイトさまの御陰で、無事設置できました。
一素人がばかばかしくも悩んだところをいくつか上げてみたいと思います。(忘れるのでメモ。)
<script type=”text/javascript”></script>ってどこに書くん?
自分でもあほすぎると思いますが、素人はこんな所でつっかっかるのですw。
基本HTML内のどこに書いてもよいらしいです。
コメントアウトしなくてもいいのかな〜という疑問を放置して、とりあえずheadの中に記述。
グローバル変数って、どこに書くんだ?!
imgタグの中に属性とやら(キャプションの有無など)を設定するらしいのですが、それが結構長く、画像が増えたらいちいち表記するのがめんどくさいと、いらぬ将来設計が頭をよぎりました。
上記のありがたいサイトさまにこんな一文が。

>下記のグローバル変数をページのonloadのタイミングなどで上書きすれば、いちいち<img>タグに上記属性をうめなくても済みます。

素直にheadに置いた<script type=”text/javascript”></script>の中に書けばいいのですが、素直に<img>タグに表記したものをコピペして悩みました。
効かん。
凡ミスです。グローバル変数とやらと<img>タグの中に書く属性とやらは表記が違うのです。
その二つをクリア(ってほどの大げさなことではない)したところ、いとも簡単に設置できてしまいました。
ところが画像にマウスカーソルを乗せたときに、虫眼鏡に変わらない。
べつにカーソルは変わらなくてもいいのですが、せっかくの機能でもあるし、画像だけを見せたいがために閉じるマークとかデフォルト装備を全部取っ払っちゃったので、これだけは残したい気分に。
ccsしか理解できないので、とりあえずStyles.cssを眺めてみると、

magplus.curという拡張子の画像が指定されております。
Windows独自のもので、Macには読めましぇん。
用意されたimageフォルダをあさるとどうやらgifの画像ファイルもある。
と、思いきや、ポインタ用の画像ではなく、右上隅に表示するためのモノのようですが、大きさもちょうどよいので代用。
後ほど枠線を消す加工をさせてもらうことにします。

cursorの値が読み込めないと、font-familyと同じく、どんどん後ろの候補を読み込むらしいので後ろにgifファイルの指定をしました。
.PopBoxImageLargeも同じく修正すると、拡大した画像にポイントしたときにマイナスの虫眼鏡にかわり、「閉じる」ってことが判りやすくなります。
Safariではばっちりです。
Firefox Mac版は…×。cursor: url をサポートしてないようです。
逆にFirefox Win版は○、ie8は×でした。
【PopBox感想】
よけいなギミックもないので、さっぱりしている。設置も簡単。
デフォルトのデザインはちょっと微妙。
【個人的総括】
javascript入門でも買って勉強した方が良さそうです。

コメントをどうぞ



PageTop