SQLの窓

2015年07月17日


jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する

オンラインで実行

jquery.balloon.js で画像のバルーンを使いたい場合、最新の(少なくともバージョンが 0.5.1)ライブラリが必要です。

※ それより古いバージョンでは、デフォルトのコンテンツ設定を透明にする為の css: null が新しい jQuery のライブラリで動作しなかったからです。 

画像を使用するので、文字列と共存する為に手動で調整が必要です。その為、実際に DIV 内にコンテンツを作成して調整終了後、display:none で非表示にします。そして、jQuery の .html() で HTML 定義を取得して、contents プロパティにセットします。

tipSize は、0 に設定しないと、吹き出し用の三角部分が表示されて動作がおかしくなる可能性があります。

その為プラグイン側の処理は単純になっており、殆どは CSS の定義に依存しています
▼ マウスオーバーでバルーンが表示されます
プラグインダウンロードページ












▼ コンテンツ用( 実際は display:none で非表示にしておく )
画像吹き出し内
の中央に文章を配置
しています
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></"+"script>");
}
if ( window[window.location.hostname+'.loadBalloon'] !== true ) {
	window[window.location.hostname+'.loadBalloon'] = true;
	document.write("<"+"script src='http://winofsql.jp/js/jquery.balloon.min.051.js'></"+"script>");
}
</script>
<style type="text/css">
/* 画像用のコンテナです */
.balloonbox {
	/* 背景画像のみ指定しています */
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	/* 画像サイズに合わせています */
	width: 323px;
	height: 278px;

	/* vertical-align を指定できるようにする為に必要 */
	display: table-cell;

	/* 内部文字列を縦方向に中央に表示する為 */
	vertical-align:middle;
}
/* 文字列部分のコンテナです  */
.ballooninbox {
	/* 幅を設定します。高さは文字列に依存します */
	width: 300px;

	/* border の太さを0にすると、点線が消えます */
	border: dashed 1px #B8561D;
	font-weight: bold;
	font-size: 24px;
}
/* 文字列部分の配置用クラスです  */
.balloonalign {
	/* 文字列を中央に */
	text-align: center;

	/* PRE 全体を DIV 内で中央にして、上下調整を 30px で行っています */
	margin: 30px auto 0;
}
</style>
<script type="text/javascript">
$(function() {
	$('#image_balloon').balloon(
		{
			contents: $("#balloon_contents").html(),
			position: "bottom",
			offsetX: 100,
			tipSize: 0,
			css: null
		}
	);
});
</script>
<pre>
▼ マウスオーバーでバルーンが表示されます
<a id="image_balloon" title="こんな感じ" href="http://urin.github.io/jquery.balloon.js/" target="_blank">プラグインダウンロードページ</a>






















▼ コンテンツ用( 実際は display:none で非表示にしておく )
<div id="balloon_contents" style='border:solid 1px #c0c0c0;width:323px;'>
	<div class='balloonbox'>
		<pre class='ballooninbox balloonalign'>画像吹き出し内<br>の中央に文章を配置<br>しています</pre>
	</div>
</div>






</pre>
上下配置の為に 『display:table-cell』 と 『vertical-align:middle』を使用しているのですが、本来の contents エリアは内部的に position:absolute の為、display:table-cell が適用されないので、ラッパーをコンテンツ内に配置し、文章はさらにその中の PRE 要素で設定しています。

上下位置の微調整の為、.balloonalign 内の margin でさらに調整して画像の中央に文字列を配置しています。

関連する記事

CSSの 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する



関連する記事



【プラグイン:jQueryの最新記事】
posted by lightbox at 2015-07-17 18:22 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり