jQuery 画像拡大 レスポンシブ・スマホ対応プラグイン Superbox ホームページ制作 | 墨田区

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

LINEで送る
Pocket

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

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




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・



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%;
}*/

まとめ

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

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


おつかれさまでした。

LINEで送る
Pocket

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

コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL