外部スクリプト：画像の縮小表示→オリジナルサイズ表示
サムネイル（風）画像とオリジナルサイズ画像の表示を、簡単な記述で実現します。
特徴
- 1枚の画像で縮小・実サイズの両方を表示できます。
- 拡大の方法を3種類から選べます。1ページ内に併用も可能です。
- 元ページにオリジナルサイズの画像を表示する。
- マウスダウンの間だけ、その場で拡大表示する。
- オリジナル画像のサイズに合わせて別窓を開いて表示する。
- ユーザは
img要素に、予約classNameを指定するだけでOK。それぞれの拡大方法は自動で判断します。
- jsファイルを編集することで、スタイルシートの記述方法（px, pt, cm, em, % など）を使い縮小サイズを指定できます。
- FC2管理画面から予約
className、またはサブクラスにユーザ独自の装飾（枠線、回り込み など）も行えます。
動作サンプル
<img src="URI" class="js_scale" alt="" title="" />のサンプル
予約クラス名：js_scale
リンクのタグを省略して、FC2のデフォルトと同じ動作（画像のURIに移動）をします。戻るにはブラウザの戻るボタンを使用してください。
<img src="URI" class="js_expand" alt="" title="" />のサンプル
予約クラス名：js_expand
マウスボタンを押している間だけオリジナルサイズで画像を表示します。離すと縮小サイズに復帰。
<img src="URI" class="js_popup" alt="" title="" />のサンプル-
予約クラス名：js_popup
オリジナルサイズの別窓が開いて画像を表示します。窓（画像本体）をクリックで閉じます。
注意点
実際に画像のファイルサイズを小さくするのではないので、1エントリに2〜3枚の使用が良いと思います。アルバムのような使い方や大きな画像には向きません。
- スクリプトオフの環境ではオリジナルサイズで表示されます。CSSを自分で記述すれば回避できますが、オリジナルサイズとの切り替えはできません。
- ポップアップブロックなどのセキュリティプログラムが動いていると、別窓表示ができない場合があります。
- ブラウザの描画能力によっては綺麗に縮小されません。元サイズを整数で割り切れる数値を、縮小サイズに設定すると良いようです。縮小サイズの設定はjsファイルの
thumbs_width = "120px";の部分を編集してください。
ダウンロード
> popup.js
アップロード
前準備として、ダウンロードしたファイルをメモ帳などで開いて編集します。（任意）
編集箇所はthumbs_width = "120px";、他のスクリプトを組み込む場合など。
- ”FC2管理画面”→”ファイルのアップロード”（ツール）→”アップロードするファイルの選択” と進み、jsファイルをアップロードします。
- ”ファイル情報”で”このファイルでエントリー”を選択をクリック。新しい窓が開き、投稿欄に以下のようなコードが書き込まれます。
<a href="http://blogNO.fc2.com/IDの一文字目/ID/file/popup.js" target="_blank">popup.js</a>
このファイル名http://blogNO.fc2.com/IDの一文字目/ID/file/pop.jsの部分をメモしておきます。
- ”FC2管理画面”→”テンプレートの設定”（環境設定）→”テンプレートの編集” と進み、現在選択されているスタイルの修正を開きます。
- ”HTMLの編集”の欄を以下のように編集します。（必須）
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- 追加部分 始まり-->
<meta http-equiv="content-script-type" content="text/javascript" />
<!-- 追加部分 終わり-->
<link href="<%css_link>" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />
<!-- 追加部分 始まり ＊スタイルシートよりも後の位置に記述してください -->
<script src="http://blogNO.fc2.com/IDの一文字目/ID/file/popup.js" type="text/javascript" charset="euc-jp"></script>
<!-- 追加部分 終わり-->
<title><%blog_name><%sub_title></title>
投稿欄にimg要素を記述するさい、お好みの予約classNameを設定すれば完成です。
作成日 2005-02-20
更新日 2005-03-20
