seesaa blogでサムネイル画像をかっこよく表示

こんにちは、紀友則です（嘘です）。久方の・・・（略）

以前 seesaa blogでLightbox.jsを使ってみる で書いたポップアップさせずにサムネイル画像を拡大表示させる方法。yanz さんのところでこの方法を見つけて、「おー、すごい」と思ってやってみたのだが、なかなか面白い。（ 路上の風景〜landscapes on the road: Lightbox JS〜ポップアップさせずにサムネイル画像を表示 を参照）。

そんな中 秋元@サイボウズ研究所プログラマーBlog さんの サムネイルの段階拡大縮小サンプル という記事をみて結構感動したので「seesaa blog でもできるのかな？」と思ってやってみた。

眼の誕生――カンブリア紀大進化の謎を解く

サムネイル画像をクリックすると拡大され、再度クリックすると元の大きさに戻るというもの。

https://ryouchi.up.seesaa.net/js/imgmove.js

技術的には「setInterval で img タグの幅と高さの属性を段階的に更新」と書かれている。javascript の中身を見てみると、たしかにそんなことやっているっぽい。サムネイル画像から10pixelずつ拡大して、実画像の大きさになるまで拡大しているよーな感じ。

で、こんな感じでHTMLファイルを書く。

---

<p class="images">
<a href="http://images-jp.amazon.com/images/P/4794214782.09.LZZZZZZZ.jpg"
class="livethumbnail">
<img src="http://images-jp.amazon.com/images/P/
4794214782.09._OU09_PE0_SCMZZZZZZZ_.jpg"
width="122" height="176" largewidth="347" largeheight="500" /></a></p>

---

なかなかオモシロそうなので捕獲＆採用。
しかし、よくこういうの思いつくし、見つけてくるねー。情報感度の高い人はこういうのすぐ見つけてくるので、すごいっす。秋元@サイボウズ研究所プログラマーBlog さん、やっぱ只者ではない。

Comments

いつも拝見しています．
これはなかなか面白いですね．途中のギャザが拡大してるぞという臨場感出してますね．元の画像とmax画像が違うのはどういうことなんでしょう．勝手にトリミングするのでしょうか．
それから，やっとリンク・リストを作成しました．こちらのblogも入れさせてもらってますので宜しくお願いします．

Posted by yanz at 2006年02月27日 11:53

yanzさん、こんにちは。りょーち＠管理人です。
コメントいただきましてありがとうございます。
＞ギャザが拡大してるぞという臨場感出してますね
そーですね。ホント、いろいろ考える人がいますよねー。この例ではサムネイル画像とmax画像は本当に縮尺の異なる別の画像になっています。拡大しているように見せているのはmax画像の方でサムネイルの画像をmax画像に指定してwidthとheightを小さめに指定しても同じ効果が得られるのではないかと思います（推測）

＞リンク・リストを作成しました
こんな辺境の地も加えていただきまして恐縮です。
yanzさんのblogも（密かに）拝見させていただいております。
今後ともよろしくお願いいたします。
ではでは。

Posted by りょーち at 2006年02月27日 15:19