トリアエズぶろぐ
フリーランスでやってる77世代のWEBプログラマが福岡からのんびりとお送りいたします。
スポンサーサイト


一定期間更新がないため広告を表示しています

<< CentOS4にyumをインストール | main | GoogleAdsenseでBanされて復帰するまでのツイートまとめ >>
[jQuery] touchPhotoViewerをバージョンアップしました


以前、FacebookやTumblr等のダブルタップで画像をズームとかするアレ、をjQueryで書きました。

facebookやtumblrのスマホアプリでよく見る写真をフルスクリーンで見てダブルタップで拡大とかする感じのjQueryを使ったJavaScriptプログラムを試しに書いてみた  

改めて使っているとちょっとダサいなーというところがあったので久しぶりにバージョンアップしましたよ。
 
・サムネイルをタップするとブラックアウトしてフルスクリーンで画像を表示
・ダブルタップすると原寸大切り替え
・スワイプでスクロール
・(シングル)タップで消えます。

に加えて、

・ズームした時の慣性スクロール
・ダブルタップした箇所を中心時ズーム

に対応しました。
プラグインにはしてません、ごめんなさい。

DEMOはこちら(スマホで見てね)


使い方は以前と同じ。
// headタグ内で読み込み
<script type="text/javascript" src="./touchPhotoViewer.js"></script>
// imageのリンクで rel="touchPhotoViewer" を追加
<a href="photo_large.jpg" rel="touchPhotoViewer"><img src="photo.jpg" /></a>

えんじょい!
スポンサーサイト


COMMENT









Trackback URL
http://akihiro.jugem.jp/trackback/305
TRACKBACK