[JavaScript] htmlのサイズ指定で縮小された画像を拡大表示する

構成やデザイン上の問題でコンテンツ幅（高さ）に収まらない画像は、img要素に width属性や height属性のみを指定して見た目を調整することがあるが、そういった画像をクリックによってうまいこと拡大するライブラリを作成した。
画像は、元サイズの比率を保ったまま、ブラウザサイズに合わせて拡大される（はず）。画像表示時のアニメーションもいくつか用意してみた。画像拡大表示時の背景色やアニメーションの種類・早さはJSの設定値で変更できる。

使い方

ZIPファイルを解凍後、JSファイルを任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルを読み込む。

<script type="text/javascript" src="imageSizeExpand.js"></script>

次に、縮小されている場合に拡大したいimg要素に class="sizeExpand" を指定する。

<img src="images/sample1.png" alt="" class="sizeExpand" width="200" />
<img src="images/sample2.png" alt="" class="sizeExpand" height="150" />

最後に、JSファイルを開き、各設定項目をサイトに合わせて編集する。

//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	targetClass : 'sizeExpand', // 対象クラス
	rolloverColor : '#fff', // ロールオーバー色
	effect : 'fade', // アニメーション種類 --> 'normal','appear', 'dropdown', 'slide', 'fade'
	overlayColor : '#000', // 画像拡大時の背景色
	moveSpeed : 8, // 移動の速さ
	expandSpeed : 6, // 拡大の速さ
	fadeSpeed : 6 // フェードの速さ
},

以上でこのscriptが適用される。

以前作成した「[JavaScript] 指定した最大幅を超える画像のみリサイズする」と併用するといいかも。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/124

[JavaScript] htmlのサイズ指定で縮小された画像を拡大表示する

使い方

トラックバックURL

コメント投稿フォーム

Site Search