lightboxで「next」や「prev」ボタンを常に表示する

lightboxでは、2枚以上写真がある場合には写真の上にマウスを乗せたときに「next」「prev」のボタンが出ますが、ぱっと見たときに気がつかない場合も多いです(というご指摘をお客様からいただきました)。で、これを常に出るように改変してみました。

改変するファイルはlightbox.cssの17行目付近の記述。

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

上記2行から「hover」属性を取ります。

#prevLink, #prevLink:visited { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink, #nextLink:visited { background: url(../images/nextlabel.gif) right 15% no-repeat; }

3枚以上の時には、写真の両側に「next」「prev」と表示されるのはちょっと・・・とは思いますが。

lightboxをクリッカブルマップで利用する。

lightboxをクリッカブルマップで利用してみる。クリッカブルマップの場合はa要素の代わりにarea要素に対してrelやtitleを設定する。が、こうした場合にFireFoxでは背景が黒く半透明にはなるのだけれど、肝心の画像が表示されなくなってしまう。IE6や7では問題ないのだけれど。

lightbox.jsを調べてみると、190行目あたりで、area要素のrel属性を取得し、それを行目のstartクラスへ渡している様子。しかしFireFoxの場合、rel要素の取得時にはその取得した値はtargetに入っているのだけれど、startクラスへ値が渡されたときにはその引数はUndefinedとなっており、結果的にrel属性が未定義扱いとなるみたい。いろいろと試行錯誤をしてみたところ、rel属性をlang属性に変更するとうまく動く。その理由については時間のある時に調べるとして、ときにその方法だけメモ。

まず、下記のtarget変数に値を代入する式において、relをlangに変更する(2カ所)。

document.observe('click', (function(event){
var target = event.findElement('a[lang^=lightbox]') || event.findElement('area[lang^=lightbox]');
if (target) {
event.stop();
this.start(target);
}
}).bind(this));

続けて、rel属性(変更後はlang属性)の属性値判定部分もrelからlangへ変更する(3カ所)。

if ((imageLink.lang == 'lightbox')){
// if image is NOT part of a set, add single image to imageArray
this.imageArray.push([imageLink.href, imageLink.title]);
} else {
// if image is part of a set..
this.imageArray =
$$(imageLink.tagName + '[href][lang="' + imageLink.lang + '"]').
collect(function(anchor){ return [anchor.href, anchor.title]; }).
uniq();
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
}

最後に、html内のarea要素に記述するrel属性をlangに置き換える。

<area shape="rect" coords="194,143,227,168" href="img/image.jpg" lang="lightbox[cat01]"  title="title"/>

とりあえず動いたけれど、いいのかなあ。。。

2010/08/03 文言の修正、行番号の追加

好きな音楽ジャンルを開拓した。

久々に音楽CDを買った。いつもはネットからダウンロードするのだけれど、今回はなぜか現物(?)が欲しくなった。で、買ったのはDAISHI DANCEのMELODIES MELODIES。

DAISHI DANCEは曲の背後に流れる低温がとても良くて、身体のリズムを刻んでくれているよう。聴いていると知らず知らずのうちに指で机をトントンと叩きたくなるようなそんな心地よさ。「ああ、僕はこんな音楽が好きだったんだ」と改めて発見させてくれた曲です。

つい最近はジブリの曲をアレンジしたものが発売されたようで、ニコニコ動画でちょっと除いてみたがとても良い感じ。とくに「君をのせて」は英語の歌詞とあいまって、聴いていて鳥肌が立つようだった。まあ、オリジナルが大好きだということもあるけれど。ああ、またCDが欲しくなっちゃうな。

返事は大事

たとえばメールをもらったとき、まずは「メールが届きましたよ」というメールを返す。仕事であればなおさらで、私もメールの内容については了承していますよという意思表示も兼ねる。また、たとえば、他人から何かをもらったとき、その場でのお礼はもちろんのこと、それを試してみての感想を一言でも良いから返す。別に社交辞令でもかまわないから、ちゃんと試したよ(試してみたよ)という意思表示をすること。

他人との関係の中で、お互いに最低限の意思の疎通をすることってとても大事だと思う。その内容如何(否定的な内容でも構わない。むしろその方が良い場合さえある)ではなく、あなたの投げたボールは”とりあえず”受け取ったよ、ということを示さなければ何も始まらない。こんなこと、誰に教わるでもなく教えるでもなく、自然と身についているものとばかり思っていた。

けど、その最低限の意思疎通すらしないひとが、このごろ多いような気がする。そりゃ、親しくなればなるほど”以心伝心”なんて言葉もあるから、一概には言えないけれど、やっぱり返事だけは欲しい。私の意見が気に入らないのなら、そう言ってくれればいい。”無視”されるのが一番イヤだな。

Google AJAX Feed APIを利用してRSSを表示する

適当に組んでみた。

[PHP]


[/PHP]

htmlはこのように

[PHP]

feed読み込みテスト

feed1


[/PHP]

ついでにSyntaxHighlighterも入れてみた。見やすいかも。

※jsファイルの一番後ろにコードが勝手に挿入される。何だろ?