WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

広告にキャプション表示＋画像拡大できるjQueryプラグイン AdImageZoomer

      2013/10/29

広告表示用のjQueryプラグインを作りました。 サイトでよく見るキャプション付きの広告を見て、何か物足りなさを感じ作ったもので、画像をアニメーションで拡大表示する機能をつけています。 jQueryプラグイン AdImageZoomer　デモページ jQuery AdImageZoomer.js v0.1 (3KB) 使い方 １、サイトにjQueryとAdImageZoomerをscriptタグで埋め込む ２、次のようなCSSを書く。CSSリセットをしておくと吉。またはこちらのファイル 
#ad-image-zoomer {
	margin: 20px;
	position: relative;
	overflow: hidden;
}
#ad-image-zoomer img {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	width: auto;
	height: auto;
}
#ad-image-zoomer div {
	padding: 5px 0;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
	text-align: center;
	color: #FFF;
	background-color: #000;
}
３、ID名がad-image-zoomerとなる要素を広告の置きたい場所に置いて、その子要素にリンク（Aタグ）と画像（IMGタグ）を入れる。 

	fuga
４、次のようなスクリプトを書く 
$(function() {
	$('#ad-image-zoomer').adImageZoomer({
		scale: 0.4,
		//width: 220,
		//fixedPAR: true,
		loop: true,
		caption: '家電特価セール',
		timeline: [
			{caption: 'ミニコンポ', coords: {x: '-8%', y: '65%', w: '35%'}},
			{caption: '洗濯機', coords: {x: '33%', y: '28%', w: '45%'}},
			{caption: 'オーブンレンジ', coords: {x: '72%', y: '70%', w: '35%'}},
			{caption: '液晶テレビ', coords: {x: '5%', y: '46%', w: '55%'}},
			{caption: '冷蔵庫', coords: {x: '40%', y: '0%', w: '70%'}}
		]
	});
});
scaleプロパティは画像の元サイズに対し、広告画像のサイズをどの割合で縮小拡大するかを指定します。0-1.0の数値を入れます。いくらか縮小して表示すると、拡大時に画像がぼやけたり荒くならなくなります。このプロパティを指定すると、widthプロパティなどは無視されます。 widthプロパティは横幅をきっちり何ピクセルにしたいというときに使います。ただし、このままでは縦のサイズが変わらず画像の縦横比が崩れるので、合わせてfixedPARプロパティをtrueに設定します。同様にheightプロパティがあり、縦のサイズを基準にするときはこちらを設定します。 captionプロパティは最初に表示するテキストを指定します。loopプロパティは、trueを指定するとアニメーションが一通り終了した後、もう一度最初に戻ってアニメーションを開始します。 timelineプロパティには、拡大したいエリアとキャプションのセットを配列にして入れます。個々の設定については、captionプロパティに表示させるテキストを、coordsプロパティに画像の拡大する位置とサイズを指定します。xプロパティとyプロパティにそれぞれ拡大時に画像のどの部分を左上基準にするか指定します。数値にすると自動的にpxとして扱いますが、パーセンテージで指定することもでき、その場合10%のように文字列にします。パーセンテージで指定すると、広告のサイズを変えても拡大位置がおかしくなることはありません。xプロパティは画像の左端を0%、右端を100%とし、yプロパティは上端を0%、下端を100%とします。wプロパティは左上基点からどこまでの幅を拡大部分にするか指定します。数値ならpx単位、文字列ならパーセント単位として扱います。たとえばwプロパティを50%とすると、画像は2倍に拡大されることになります。wプロパティの代わりにhプロパティを指定することもでき、こちらは縦の拡大部分のサイズを指定します。 ほとんどのブラウザで動きますが、画像が読み込まれないケースがまれにあります。ちかぢかドキュメントページを用意する予定です。 追記：（10/29） jQuery AdImageZoomer.js v0.2 (4KB) ページに初回訪問時、画像が読み込まれない問題を修正しました。

 - JavaScript/Ajax , , ,