• かちびと.net

    全体をドラッグで動かせるグリッドレイアウトのイメージギャラリーをjQueryで構築するチュートリアル。なかなか良かったのでメモです。

    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で構築するチュートリアル

スポンサーリンク

画面いっぱいに広がったグリッドレイアウト
のイメージギャラリーをドラッグで動かす
事ができるコンテンツをjQueryで実装する
為のチュートリアルです。かなり良く出来
てます。iPhoneでも一応可能でしたので
工夫すればスマートフォンにも使えるかも。

Codropsのチュートリアルが相変わらず素敵なのでメモがてら。画面全体に広がったグリッドレイアウトのイメージギャラリーを丸ごとドラッグで動かせるようにする、というチュートリアル。

Draggable Image Boxes Grid


画面全体にギャラリーが広がり、全体をドラッグで動かせます。これは、Stephen HamiltonのWebサイトをオマージュしたもの。Stephen HamiltonはFlashですが、同じようなUIをjQueryで作ろう、という趣旨みたいです。ドラッグにはjQuery.kineticを使用しています。


サムネイルをクリックするとアニメーションしながら画面いっぱいに画像が拡大します。

コード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
<script type="text/javascript" src="jquery.kinetic.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

本体とドラッグ用のプラグインファイル、easingプラグインを読み込みます。

実装にはテンプレートタグが使われています。

<script id="previewTmpl" type="text/x-jquery-tmpl">
	<div id="ib-img-preview" class="ib-preview">
                <img src="${src}" alt="" class="ib-preview-img"/>
                <span class="ib-preview-descr" style="display:none;">${description}</span>
                <div class="ib-nav" style="display:none;">
                    <span class="ib-nav-prev">Previous</span>
                    <span class="ib-nav-next">Next</span>
                </div>
                <span class="ib-close" style="display:none;">Close Preview</span>
                <div class="ib-loading-large" style="display:none;">Loading...</div>
            </div>
		</script>
		<script id="contentTmpl" type="text/x-jquery-tmpl">
			<div id="ib-content-preview" class="ib-content-preview">
                <div class="ib-teaser" style="display:none;">{{html teaser}}</div>
                <div class="ib-content-full" style="display:none;">{{html content}}</div>
                <span class="ib-close" style="display:none;">Close Preview</span>
            </div>
		</script>

あとはjsコードを書いていくんですが、ちょっと長いのでリンク先でご確認ください。休日ですし、ゆっくりご覧になってはいかがでしょう。

順を追って解説してくれていますので頭に入りやすいかと思います。

Draggable Image Boxes Grid

URL :
TRB :

Comments & Trackbacks (1)

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services