スクリーンショットや写真なんかをブログに貼り付けること多いです。特に最近はWindows Live Writerで投稿することがほとんどなんだけど、画像の挿入機能を使うと自動で小さなサイズの画像の生成と大きいサイズの画像へのリンクが貼り付けらて、楽ちんだなと思ってました。
<a href="{大きい画像のURL}">
<img style="border: 0px none; display: inline;"
title="{ファイル名}" alt="{ファイル名}"
src="{小さい画像のURL}" border="0" height="{高さ}" width="{幅}" /></a> こんな感じのタグが挿入されますね。でも、単純にアンカーでリンクしてるだけなので表示のされ方がちょっと素っ気ない。というか画像だけが表示される。
と、言うわけで、もう少しかっこよく表示させたいので、jQueryを以前ブログで使えるように取り込んでるので、FancyBoxっていうのを使ったかっこよく表示されるようにしてみました。
Fancybox | Fancy lightbox alternative 個人的にはZoomしなくてもちゃんと見れるように、ちゃんと切り抜いて必要な箇所だけにした画像を貼り付けるほうが見やすいとは思うけど、面倒だしね．．．。使い方は簡単。Usageに書いてる通り。
- scriptタグ書く。
- linkタグでcssを取り込む。
- aタグで囲まれたimgタグを書く。
- エレメントに対してfancybox()を呼ぶ。
これだけ。scriptにはjQueryを含んでないとダメだけど、これはGoogle Ajax Libraryを参照。その他のファイル群をどこに置くのか悩んだけど、結局Google Page Creatorにアップ。もう新規アカウントを作成できないから、アカウント持ってない人は違うスペースを用意しないとね。一般的にはどうするんだろ？SkyDrive？
ページのローディングが終わったところで、fancyboxを呼び出してみる。
$(function(){
$("a[href*=ggpht.com]").fancybox();
});なにも表示されない．．．。悲しい。これでいいはずなのに．．．。大きい画像のURLが間違ってるのかなと思ったけど、そんなこともなくブラウザ上ではちゃんと表示される。なんでだろうと大きい画像をダウンロードしてローカルで確認しようと思ってaタグのリンク先を保存したら、理由が分かった。aタグのhrefに入ってるURLは画像そのものを指してるんじゃなくて、画像を表示するHTMLを指してた。常識？
例えば↓この画像。
生成されるHTMLは
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1PEyyGzFpZia3K4EsRhwLmYtKjWj-joOVNHoBITokC21ckVKbmY7kgrzRLXTnaGwjntlnBlN_tGucmzTN3d4MSKMHAqHN6m3vNCCybUOyacorkwpJUfnKR2AwHEQFvenBRs5TUkt_Us/s1600-h/Boston%20City%20Flow%5B3%5D.jpg"> <img style="border-width: 0px; display: inline;" title="Boston City Flow" alt="Boston City Flow" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0msOW6N2Z33SMLaGq-xvNrKS-oi2jtpILQXDoVrXsTunOLDnbkbJcWTNJtcsSUYgZGbTEkZET-oHP-MxJXRURUIJy1ONK4qi9vIooTffGIwHFTasaKW3LKhyphenhyphenOaO52l_nacwRQ37j7QGc/?imgmax=800” border="0" height="160" width="240" /> </a>こうなる(Picasaだからね)。このアンカーのリンク先はHTMLで画像じゃないんだけど、中身は↓。
<html> <head> <title>Boston City Flow[3].jpg (image)</title> <script type="text/javascript"> <!-- if (top.location != self.location) top.location = self.location; // --> </script> </head> <body bgcolor="#ffffff" text="#000000"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1PEyyGzFpZia3K4EsRhwLmYtKjWj-joOVNHoBITokC21ckVKbmY7kgrzRLXTnaGwjntlnBlN_tGucmzTN3d4MSKMHAqHN6m3vNCCybUOyacorkwpJUfnKR2AwHEQFvenBRs5TUkt_Us/s1600/Boston+City+Flow%5B3%5D.jpg" alt="[Boston City Flow[3].jpg]" border=0> </body> </html>
アンカーとのURLの違いはHTMLが/s1600-h/で、画像が/s1600/。なのでこれをfancybox適用前に書き換えてしまいましょう。
$(function(){
$("a[href*=ggpht.com]").each(function(idx,elem){
elem.href = elem.href.replace('/s1600-h/','/s1600/');
$(elem).fancybox();
});
});全然、他のパターンを考慮してないけど、いいよね。これで、画像表示も見やすくなりました。
