極意(51)サムネイル(thumbnail)画像とは?

サムネイル(thumbnail)とは、視認性を高めるために縮小させた見本のことを言い、親指(thumb)の爪(nail)のように小さく簡潔であるという意味から来ています。(引用)

Webの世界では、多数の画像を一覧表示するために、本来のサイズより大幅に縮小された小さな画像データを意味しています。

HAIKでは、画像表示プラグイン(&show)のオプションとして、以下のように使用します。

a0777_000030_360.png

&show(a0777_000030_360.png,thumbnail,50%);

[check]HAIKでの thumbnail は、画像の周りに枠を付ける機能となります。その枠を丸くする機能が circle です。
一般的に thumbnail に circle を併用して丸型のサムネイルを作成します。(以降)


サムネイルを円で表現

a0777_000030_360.png

左のサムネイル画像は正円となっています。正円にするには、元の画像が正四角形になっている必要があります。
即ち、正円のサムネイルを作成するには、正四角形の画像を使用すること。

[check]上記のおまじないです。

&show(a0777_000030_360.png,thumbnail,circle,90%);


サムネイルが楕円になるケース1

a0777_000030.jpg

元の画像が横長だと左図のような横長の楕円になります。

[check]上記のおまじないです。

&show(a0777_000030.jpg,thumbnail,circle,70%);


サムネイルが楕円になるケース2

a0002_004067.jpg

元の画像が縦長だと左図のような縦長の楕円になります。

[check]上記のおまじないです。

&show(a0002_004067.jpg,thumbnail,circle);


サムネイルからポップアップ画像を表示

a0002_004067.jpg

元の画像の60%でサムネイルを作成しています。そのサムネイルをクリックするとオリジナル画像がポップアップされます。

[check]上記のおまじないです。

CENTER:&show(a0002_004067.jpg,thumbnail,circle,colorbox,60%);


角丸とサムネイルの併用

a0001_17441.jpg

オプションに角丸(round)と枠付き(thumbnail)を併用した例です。
あまり角丸(round)の効果は目立っていませんが・・・・・

[check]上記のおまじないです。

&show(a0001_17441.jpg,round,thumbnail,60%);


thumbnail は pola で代用可能です。

a0001_008188_321.png
[check]上記のおまじないです。

&show(a0001_17441.jpg,pola,circle,80%);

[check]解説
何故、オプション pola が thumbnail と同じ機能なのか?
マニュアルには、その解説はありませんが、単純に簡略形ぐらいの認識で良いような気がします。



戻る

上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 4  
    役に立たなかった 0