[JS]Google画像検索のような画像の拡大表示ができるjQueryプラグインSuperbox

jQueryプラグイン・ライブラリ

2013.06.08

jQueryプラグインSuperboxを使って、Googleの画像検索のような見せ方ができます。

サムネイル画像をクリックして、その直下に拡大画像を割り込ませて表示させるUIです。

ギャラリーサイトなどでLightboxを使って立ち上げていた画像を、Superboxを使って見せ方を変えても面白いかもしれませんね。

Superbox のダウンロード
Superboxの設置
HTMLファイルの記述例
Superboxのデザイン変更
1. サムネイルの表示サイズを変更
2. 背景の色を変更
IE6、IE7、IE8でのSuperboxの動き

Superbox のダウンロード

Google画像検索のような画像の拡大表示ができるjQueryプラグイン「Superbox」

以下のページよりSuperboxのファイルをダウンロードします。
Superbox

Superboxの設置

ダウンロードしたstyle.css、superbox.jsのファイルとjqueryファイルをHTMLファイル内に設置します。

<link rel="stylesheet" href="./style.css">
<script src="./jquery.min.js"></script>
<script src="./superbox.js"></script>
<script>
$(function() {
	$('.superbox').SuperBox();
});
</script>

$(function() {

$('.superbox').SuperBox();

});

</script>

※「閉じる」ボタンの画像ファイルもあるので、アップの際はフォルダの階層に注意してください。

HTMLファイルの記述例

SuperboxのサイトがレスポンシブWEBデザイン対応もしていて動きも分かりやすいので、これをベースに組んでみます。

<div class="superbox">
    <div class="superbox-list">
    <img src="img-s-01.jpg" data-img="img-l-01.jpg" class="superbox-img" />
    </div><!--
	--><div class="superbox-list">
    <img src="img-s-02.jpg" data-img="img-l-02.jpg" class="superbox-img" />
    </div><!--
	--><div class="superbox-list">
    <img src="img-s-03.jpg" data-img="img-l-03.jpg" class="superbox-img" />
    </div><!--
	--><div class="superbox-list">
    <img src="img-s-04.jpg" data-img="img-l-04.jpg" class="superbox-img" />

…
</div>

</div><!--

--><div class="superbox-list">

</div><!--

--><div class="superbox-list">

</div><!--

--><div class="superbox-list">

…

</div>

.superboxで指定された要素内のリスト（画像）が、Superboxによる画像拡大表示の対象となります。

img srcにはサムネイル（小さい画像）を、data-imgにはオリジナル画像（大きい画像）を指定します。

※<!– –>のコメントタグが変な形で入ってますが、これは.superbox-listの要素をdisplay:inline-blockで横並びさせているためで、要素の隙間を埋める処置です。

Superboxのデザイン変更

同梱しているstyle.cssを変更すればデザインの変更も可能です。

サムネイルの表示サイズを変更

style.cssの91行目より、Media Queriesでブラウザの幅毎に画像の表示サイズを制御しています。

@media only screen and (min-width: 320px) {
	.superbox-list {
		width:50%;
	}
}
@media only screen and (min-width: 486px) {
	.superbox-list {
		width:25%;
	}
}
@media only screen and (min-width: 768px) {
	.superbox-list {
		width:16.66666667%;
	}
}
@media only screen and (min-width: 1025px) {
	.superbox-list {
		width:12.5%;
	}
}

@media only screen and (min-width: 320px) {

.superbox-list {

width:50%;

}

@media only screen and (min-width: 486px) {

.superbox-list {

width:25%;

}

@media only screen and (min-width: 768px) {

.superbox-list {

width:16.66666667%;

}

@media only screen and (min-width: 1025px) {

.superbox-list {

width:12.5%;

}

この辺の % をブラウザの幅別に調整することで、サイトに合わせたレスポンシブWEBデザイン対応が可能かと思います。

背景の色を変更

また、Superboxのサイトのように、背景がオレンジ色になっている個所は、23行目のを別の背景色にすればイメージが変わります。

body {
	background:#e16461;
}

body {

background:#e16461;

}

以下にSuperboxの簡単なデモサイトを用意しています。

Superbox による画像表示のデモ

IE6、IE7、IE8でのSuperboxの動き

IETesterで見た所、IE6〜IE8でも動くことは動きます。

あとはレスポンシブ対応の補正であったり、何故かIEの場合はサムネイルを横並びにした際に隙間が生じる…などの細かい対応をすれば、IE下位バージョンでもそこそこ使えそうです。

参考ページ
Superbox