• かちびと.net

    iPhoneやAndroid等のタッチデバイス向けイメージギャラリー用JSライブラリ・PhotoSwipeなかなか良いですぞ。ピンチイン/アウトによる拡大や縮小、フリック等にも対応しています。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

iPhoneやAndroid等のタッチデバイス向けイメージギャラリー用JSライブラリ・PhotoSwipeなかなか良いですぞ

スポンサーリンク

なかなか良さ気だったので備忘録。
iPhone、AndroidやiPadなどの人気
のタッチデバイス用に作られたギャラ
リー用のJSライブラリ・PhotoSwipe。
人気のプラグイン、jQueryMobileでも
利用することが出来ます。

タッチデバイス専用とあって、独自の操作でもある、ピンチイン/アウト等による拡大や回転、フリックで進むなどの操作が可能です。

PhotoSwipe


PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。


jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。

PhotoSwipeサンプル with jQuery Mobile

以下、iPhoneとiPadでのキャプチャです。

iPhone

iPhoneでのキャプチャです

デフォルト


サムネを幅に自動で合わせてくれます。

ランドスケープ


ランドスケープ時でもサムネイルを自動で拡大し、幅を合わせてくれます。

画像の閲覧


単体表示はサムネイルをタップします。左右フリックで進んだり戻ったり。

ナビゲーションもある


単体、ランドスケープ。タップすると下部にナビゲーションバーが表示されます。

拡大、縮小、回転など


2本指でピンチイン/アウトによる拡大縮小や、回転、スワイプで位置も動かせます。

iPad

iPadでのキャプチャ。

デフォルト


iPadで閲覧すると自動でサイズをiPadに合わせてくれます。

ランドスケープ


ランドスケープ時も勿論自動で幅を調整。iPadだとダイナミックですね。

画像の閲覧


サムネイルタップで単体画像を表示します。左右フリックで進んだり。

拡大、縮小、回転など


拡大して回転とか。

使い方

jQueryプラグインとjQuery非依存タイプがありますので両方書いておきます。

非依存型

<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-2.1.3.min.js"></script>
	<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
	var myPhotoSwipe = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
}, false);

	</script>

非依存型の場合は上記のようにライブラリを読み込んで設定。

jQuery Mobile併用

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
	<script type="text/javascript" src="simple-inheritance.min.js"></script>
	<script type="text/javascript" src="jquery.animate-enhanced.min.js"></script>
	<script type="text/javascript" src="code-photoswipe-jQuery-1.0.8.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('div.gallery-page').live('pageshow', function(e){
				$("div.gallery a", e.target).photoSwipe();
				return true;
			})
		});

	</script>

jQuery Mobileの場合は本体とjQueryMobileライブラリ、photoswipeプラグインを読み込んで設定します。

マークアップ

<div id="Gallery">
        <div class="gallery-row">
                <div class="gallery-item"><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></div>
                <div class="gallery-item"><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></div>
                <div class="gallery-item"><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></div>
        </div>
        <div class="gallery-row">
                <div class="gallery-item"><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></div>
                <div class="gallery-item"><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></div>
                <div class="gallery-item"><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></div>
        </div>
</div>

マークアップは割とシンプル。

ライセンスはMITです。これはなかなか汎用性があって良いのでは無いかなと。ドキュメントとデモ、ライブラリのダンロード等は以下より。

PhotoSwipe

URL :
TRB :

Comments & Trackbacks (10)

  1. 通りすがり

    いつも記事を参考にさせていただいています。

    jquery非依存のほうで、サンプルソースのスクリプトタグが閉じられていないようです。
    ちょっと試してみたくてコピペしたら、エラーが出て「?」となりました。

    • シロ

      こんにちは :)

      jquery非依存のほうで、サンプルソースのスクリプトタグが閉じられていないようです。

      あらっw失礼しました><
      今見たらバージョンもアップしてファイル名も変わってました・・ので新しくしておきました!有難うございました :D

  2. サムバディ

    大変参考になりました。PhotoSwipeいいですね。
    ただ、PhotoSwipeの画像閲覧ページでは,ヘッダ・フッタが,JQuery Mobileのヘッダ・フッタと統一感が無くて,
    なんとかならないかなぁなどと思っています。
    自分の技術力では,コピペ後の微調整程度が限界なもので。。。

    • シロ

      こんにちは!僕も気に入ってますー。もう少し案件で使う機会があると嬉しいですけど・・

      そうですね・・CSSにJQMのCDNを使うとデザインがマッチしないと思います。JQMのデザインを変えるのが多分割と簡単で一般的な方法じゃないかなぁ・・と思ってます。

      公式で公開しているツールを利用するのは如何でしょう?
      http://jquerymobile.com/themeroller/

  3. kei

    こんにちは。とても参考記事ありがとうございます。
    作っていたのですがピンチインピンチアウトが動作せず、なにか設定をしてあげないといけないんでしょうか?
    もしわかられるようでしたら教えて頂けるととてもありがたくおもいます。

    • シロ

      どういった環境で動作していないのか分かりませんので回答するのが難しいのですが、本体1.6.4だとAndroidで動かないという報告はあるようですね。

      https://github.com/codecomputerlove/PhotoSwipe/issues/354

      hammer.jsを併用して何とか動かしているようです。
      尚、GithubではiOSにおける問題の修正もされているようなのでピンチインは動作するかと思われます。

      https://github.com/codecomputerlove/PhotoSwipe

      設定を見直してみては如何でしょう?

  4. kei

    シロ様

    お返事ありがとうございました。説明不足でしつれいいたしました。
    iphoneなどでは問題はなかったのですが、android4.0がさどうしませんでした。photoswipeは3.0.5を使用していました。
    設定を再度行ってみたいと思います。

    kei

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services