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

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

・https://github.com/toddmotto/superbox

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

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

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

以下のソースを記述して style.css と superbox.js と jquery を読み込みます。

<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 で発生する要素の隙間を埋めるために記述されています。

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