jQuery 画像拡大 レスポンシブ・スマホ対応プラグイン Superbox

レスポンシブ・スマホ対応で画像を拡大表示するjQueryのプラグインSuperboxの紹介です。

jQueryで画像拡大するプラグイン Superbox

画像を拡大表示するプラグインといえば Lightbox が超有名ですが、この Superbox はサムネイル画像をクリックして、その下に拡大画像を表示させます。Google の画像検索のような表示方法といえば想像しやすいでしょうか。しかもレスポンシブWEBデザイン対応となっているので、スマホやタブレットでの表示もバッチリです。これからサイトを作ろうと考えている方にはピッタリなプラグインといえますね。

ここでは jQueryプラグインSuperboxの使い方とデモ を紹介します。


Superboxの使い方

使い方は簡単です。まずは こちらのページ よりプラグインをダウンロードしましょう。

https://github.com/toddmotto/superbox

画面右下にある「Download ZIP」からダウンロードします。

ダウンロードしたディレクトリ内に index.html があります。このサンプルソースをベースに説明していきます。まず、ダウンロードしたファイルやディレクトリをサイトに配置しましょう。

ここでは ./superbox/ という名前で解凍したディレクトリを配置します。

HTMLの記述

以下のソースを記述して style.csssuperbox.jsjquery を読み込みます。

<link href="./superbox/css/style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./superbox/js/superbox.js"></script>
<script>
$(function() {
 $('.superbox').SuperBox();
});
</script>

表示したい画像を記述します。

<div class="superbox">
  <div class="superbox-list">
    <img src="./images/thumb1.jpg" data-img="./images/full1.jpg" alt="" class="superbox-img">
  </div><!--
  --><div class="superbox-list">
    <img src="./images/thumb2.jpg" data-img="./images/full2.jpg" alt="" class="superbox-img">
  </div><!--
  --><div class="superbox-list">
    <img src="./images/thumb3.jpg" data-img="./images/full3.jpg" alt="" class="superbox-img">
  </div><!--
  --><div class="superbox-list">
    <img src="./images/thumb4.jpg" data-img="./images/full4.jpg" alt="" class="superbox-img">
  ・・・(中略)・・・
  </div>
</div>

<div class="superbox"> で指定された <div class="superbox-list"> 内の <img> タグが、拡大表示されます。img src にはサムネイル画像を指定し、data-img にはオリジナル画像を指定します。<!– –>のコメントタグは、display:inline-block で発生する要素の隙間を埋めるために記述されています。

CSSのカスタマイズ

style.css 内に以下の記述があります。ここを変更してサイトの背景色に合わせましょう。既に別の CSS で作られている場合はコメントしてしまいましょう。

body {
  background:#e16461;
}

style.css 内の Media Queries でブラウザの幅毎の画像表示サイズが変更されています。%値を変更すれば、サイトに合わせたレスポンシブWEBデザインの対応ができます。

@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%;
  }
}

デモページ

こちらに Superbox を使ったデモページ を用意しました。テーマは仕事部屋のアイテム達。

Superboxを使ったデモページ

デモでは style.css 内の Superbox の機能に関係のない部分はコメントしています。

/*------------------------------------*
    SuperBox
*------------------------------------*/
/*
*,
*:after,
*:before {
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-font-smoothing:antialiased;
  -o-font-smoothing:antialiased;
  font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body {
  background:#e16461;
}
ul {
  list-style:none;
}
img {
  vertical-align:bottom;
}
.wrapper {
  max-width:1280px;
  margin:0 auto;
}
.logo {
  margin:25px 0;
  text-align:center;
}
.logo-img {
  max-width:95%;
}*/

まとめ

jQueryプラグインSuperboxの使い方とデモを紹介しました。

画像ギャラリーを表示したいサイトではかなり有効なプラグインだと思います。ただ、サムネイル画像とオリジナル画像を用意しないとならないのが若干面倒ではあります。(そんなことない??)

WordPressで作成されたサイトであれば、メディアファイルから画像を追加した際に自動でサムネイルが作られるので、これらの機能をうまく使うとよいかもしれませんね。

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。