• かちびと.net

    jQuery Mobileを使った、タップで拡大するシンプルなイメージギャラリーを構築する際のサンプルコードのご紹介。使うとき用の備忘録です。

    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

jQuery Mobileを使った、タップで拡大するシンプルなイメージギャラリーを構築する際のサンプルコード

スポンサーリンク

備忘録。JQMでイメージギャラリーを作成する
際に参考になりそうなサンプルがありましたの
でご紹介です。問題視されていた脆弱性もと
りあえず修正されましたし、実践も視野に入れ
てスキルを磨きたいところですね。JQMももう
少し軽くなってくれるといいんですけどね・・

いつもの個人的なメモ。jQuery Mobileでタップでポップアップするイメージギャラリーを構築するコードのサンプルです。以前ご紹介したPhotoSwipeもかなりいいですよ。

jQuery Mobile Gallery


こんな感じで実装出来ます。リンクにはdata-transition=”pop”が使われており、サムネイルをタップすると画像がポップアップして拡大されます↓

拡大した画像には見出しも付いています。

コード

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

本体とかプラグインとかCSS読み込み。

マークアップは以下の様にします。

<div data-role="content" id="pagecontent">
		<div class="gallerycontent">
			<a href="#imgshow" data-transition="pop" data-rel="dialog" class="first"><img src="01.jpg" alt="かちびと01"/></a>
			<a href="#imgshow" data-transition="pop" data-rel="dialog"><img src="02.jpg" alt="かちびと02"/></a>
			<a href="#imgshow" data-transition="pop" data-rel="dialog"><img src="03.jpg" alt="かちびと03"/></a>
                            ・
                            ・
                            ・
                            ・
			<a href="#imgshow" data-transition="pop" data-rel="dialog" class="last"><img src="12.jpg" alt="かちびと12"/></a>
		</div>
</div>

href属性は全て#imgshowとし、画像をくくります。画像はサムネイルを用意する必要は無く、cssでリサイズしています。

リサイズした画像をタップするとポップアップして拡大するスクリプトを書きます。

$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%; height:100%;"/></a>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$(this).parent().addClass('selectedimg');
});

タップするとhref=”#gallerypage”している画像にwidthとheight属性が追加されます。さらに、alt属性がh2に入れられるので、拡大表示するとalt属性が見出しになります。

他にナビゲーションを加えて、拡大したまま次の画像を見れるようにするんですが、残りのチュートリアルはリンク先で確認してください。

作ってみました↓

シンプルでなかなかいい感じです。ランドスケープ時にはサムネイルは5列になります。

サンプルは以下にあります。ぜひチェックしてみてくださいー

jQuery Mobile Gallery

URL :
TRB :

Comments & Trackbacks (4)

  1. jule

    はじめまして。
    jQuery Mobileを使用したイメージギャラリーを拝見させていいただいた中で、
    お伺いしたい点が一つ御座います。
    ~間でgallerypageへのリンクが3箇所ありますが、
    以下のようなトップページからリンクさせる場合、上記hrefでgallerypage1、gallerypage2と
    複数指定することは可能でしょうか。
    ご教示いただければ幸いです。

    gallerypage1
    gallerypage2

    以上、宜しくお願い致します。

    • シロ

      こんにちは。

      ~間でgallerypageへのリンクが3箇所ありますが、
      以下のようなトップページからリンクさせる場合、上記hrefでgallerypage1、gallerypage2と
      複数指定することは可能でしょうか。

      この記事でご紹介したコードはとてもシンプルなもので、gallerycontentというクラス名のdiv内の画像を呼び出しているだけに過ぎないのです。ですので、新たに別のdiv要素とそのdivにあわせたjqueryのコードを書けば可能です。

      しかし、それを行うのであればプラグインの方が多分楽です。
      http://kachibito.net/web-design/photoswipe.html

      どちらか、コンテンツにあわせて施工なさると良いかなと思います。
      参考になれば幸いです:D

      • jule

        ご返答有難う御座います。
        提示していただきましたPhotoSwipeを用いることで
        無事構築が終わりました。
        御サイトはとても丁寧に解説されており、今後も良きTipsとして
        参考にさせて下さい。

        • シロ

          何よりですー!PhotoSwipeはとても人気のあるプラグインで僕もオススメです!

          いえいえ、恐縮です・・まだまだ勉強中なので間違ってたら叱ってあげてくださいw

          コメント有難う御座いました:D

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services