jQuery 画像の拡大・スワイプ スマホ対応プラグイン Swipebox ホームページ制作 | 墨田区

jQuery 画像の拡大・スワイプ スマホ対応プラグイン Swipebox

LINEで送る
Pocket

レスポンシブ・スマホ対応で画像を拡大・スワイプ表示するjQueryのプラグインSwipeboxをご紹介します。
Swipebox  A touchable jQuery lightbox画像を拡大表示するプラグインといえば Lightbox が超有名ですが、この Swipebox は Lightbox より軽量で簡単にモーダルウィンドウに画像を表示できます。しかもスワイプ動作による画像間の切り替えも可能となっているので、スマホ時代にピッタリのプラグインかもしれません。もちろん、レスポンシブ・スマホ対応デザインとなっているので、スマホでもキレイにモーダル表示されます。

ここでは Swipebox の使い方 をご紹介します。




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


Swipeboxの使い方

まずは Swipebox をダウンロードしましょう。
こちらのページから一番下にある Download ボタンでダウンロードできます。
Swipebox A touchable jQuery lightbox
※ここでは Swipebox v1.3.0.2 をダウンロードしています。

ダウンロードした swipebox-master.zip を解凍すると、下図のようなディレクトリ構成となっています。この中の src だけを利用しますので、コピーしてサイトに設置します。
swipebox-master.zipディレクトリ構成

※css で img フォルダ内のアイコンを読み込む記述があるので配置場所にはご注意を。


HTMLを記述

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="./swipebox/js/jquery.swipebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="./swipebox/css/swipebox.css" />
<script type="text/javascript">
  $(function() {
      $('.swipebox').swipebox();
  });
</script>

表示したい画像を記述します。
以下の記述は、サムネイルをクリックするとオリジナル画像を表示するサンプルです。
上述の jQuery で指定したとおり <a> タグの class に swipebox と指定します。

<a href="./images/image.jpg" class="swipebox" title="Swipebox デモ">
  <img src="./images/image.jpg" alt="Swipebox デモ" height="300" width="300">
</a>

スワイプさせる

ギャラリー画像を表示してスワイプすることもできます。
<a> タグの rel に指定した名前でギャラリーを表示します。
rel に指定した名前が同じ画像についてスワイプできます。

<!-- Gallery 1 -->
<a rel="gallery-1" href="images/image1.jpg" class="swipebox" title="Swipebox スワイプデモ1">
  <img src="./images/image1.jpg" alt="Swipebox スワイプデモ1" height="300" width="300">
</a>
<a rel="gallery-1" href="images/image2.jpg" class="swipebox" title="Swipebox スワイプデモ2">
  <img src="./images/image2.jpg" alt="Swipebox スワイプデモ2" height="300" width="300">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="images/image3.jpg" class="swipebox" title="Swipebox スワイプデモ3">
  <img src="./images/image3.jpg" alt="Swipebox スワイプデモ3" height="300" width="300">
</a>
<a rel="gallery-2" href="images/image4.jpg" class="swipebox" title="Swipebox スワイプデモ4">
  <img src="./images/image4.jpg" alt="Swipebox スワイプデモ4" height="300" width="300">
</a>

デモページ

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


まとめ

Swipebox は軽量で簡単に導入でき、スマホ対応もされているので今の時代にマッチしたプラグインといえます。個人的な見解ですが、割と扱いやすいので好きですね。
実際に私のクライアントで、このプラグインを導入して制作したホームページもあります。
皆さんも試してみてください。


おつかれさまでした。

LINEで送る
Pocket

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

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

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

コメント(必須)

Trackback URL