（本記事を書いてサイトから申込んだら、早速non-commercial版がメールで送られてきた）
まず、記事に載せる画像データを採取するために近くの海岸を歩いてきた。 平日だというのに、子供連れの家族や年配者などかなりの人々が水際に入ってアサリ取りをしていた。 どれも小さな貝ばかりで、これでは味などなくスーパーなどで買った方が良いと思ったが、食料品などの値上げが続く今の時代にあって少しでも家計に役立てばと思っているのかもしれない。
海岸は自治体が管理しているのだが、これから海の季節に入るというのに、水際にはゴミやビンの欠片がそこかしこに見られた。 海水の流れも十分にないのでアオサが群生しており、数十年前の公園計画そのものが不十分であったことがよく分かる。 行政が造る箱物は、作ったらお終いというのが相場のようだ。
Magic Toolboxには、Magic Thumb、Magic Magnify、Magic Zoomという３つ機能が提供されており、まずMagic Thumbは、サムネールをクリックすると拡大サイズの写真を表示し、写真の中でクリックすると元に戻り、また右上の矢印をクリックする（もしくはスペースキーを押下する）と次の拡大画像へと遷移する。
Magic Magnifyは、虫眼鏡が現れてカーソル位置に応じて、その中に拡大された画像が表示される。
Magic Zoomは、四角のレンズが現れ、そのカーソル位置に応じて、隣の場所に拡大映像が表示される。
どれも、サンプルファイルを見れば組み込むのは容易で、自分はルート上にmagictoolというフォルダーを作り、そこにスタイルシートやＪＳファイル、アイコンなどを入れた。 その前提で組み込んだスクリプトは以下の通りである。
１．Magic Thumb
まず、<head>～</head>に次のスクリプトを入れた。 と同時に、スタイルシートの中にあるアイコン画像の置き場所は自分の環境に合わせる必要がある。
<link rel="stylesheet" href="<$MTBlogURL$>magictool/magicthumb.css" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<$MTBlogURL$>magictool/magicthumb-packed.js"></script>
そして、記事内の画像表示スクリプトは、
<a href="(ファイルの置き場所)/20080702006.jpg" class="MagicThumb"><img src="(ファイルの置き場所)/20080702006s.jpg" alt=""></a>そうやって、入力した画像が以下のものだが、右矢印で拡大画像は遷移する
 花右矢orスペースキー = 次の写真 |  |  |  < |
 |  盛りを過ぎてしまったバラ右矢 = 次の写真 |  |  |
 |  |  |  |
２．Magic Magnify
<head>～</head>に次のスクリプトを入れる。
<meta http-equiv="imagetoolbar" content="no" />
<script src="<$MTBlogURL$>magictool/magicmagnify.js" type="text/javascript"></script>
そして、記事内の画像を表示させるスクリプトは、
<a href="(ファイルの置き場所)/20080702054.jpg" rel="zoom-color: #6e8c0e; size: 110px; type: circle" class="MagicMagnify"><img src="(ファイルの置き場所)/20080702054s.jpg"/></a>但し、デモ版だと１０秒程度開発元と通信して、DEMOの赤い表示が出てからでないと機能しない。 正式版でも表示できるまで少し時間がかかるようだ。 もしかしたら使っているＰＣの能力によるかも。
３．Magic Zoom
<head>～</head>に次のスクリプトを入れる。
<link rel="stylesheet" href="<$MTBlogURL$>magictool/MagicZoom.css" type="text/css" media="screen" />
<style>
img {
border-width: 0px;
}
</style>
<script src="<$MTBlogURL$>magictool/mz-packed.js" type="text/javascript"></script>
そして、記事内の画像を表示させるスクリプトは、
<a href="(ファイルの置き場所)/20080702048.jpg"" title="" class="MagicZoom"><img src="(ファイルの置き場所)/20080702048s.jpg"/gt;</agt;
こちらもページを開いてから１０秒程度開発元と通信しているようで、機能するまで待たされる。
今日の暦から ： 暮らしを夏型に変える
0 件のコメント:
コメントを投稿