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


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

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


タイトルそのまんまです。
jQueryプラグインとか探してみたのですが、丁度いいのがなかったので書いてみました。
jQueryプラグインではなく、普通のjQueryを使ったJavaScriptです。

・サムネイルをタップするとブラックアウトしてフルスクリーンで画像を表示
・ダブルタップすると原寸大切り替え
・スワイプでスクロール
・(シングル)タップで消えます。

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

使い方は簡単!
// headタグ内で読み込み
<script type="text/javascript" src="./touchPhotoViewer.js"></script>
// imageのリンクで rel="touchPhotoViewer" を追加
<a rel="touchPhotoViewer"><img src="photo.jpg" /></a>
ちゃちゃっと書いたのでアレですが、お試し頂けると幸い。
早速つなビィに組み込みました。

そんじゃーね!
iPhone/スマートフォンアプリのバージョンアップ


つなビィのiPhone/スマートフォンアプリは右上にメニューボタンを設置しています。
今までは日本人は右利き多い、メニュー開いて右手のまま記事を書きたい、という理由でメニューボタンを右上に設置してたんです。

でもiPhoneの縦長化やスマホの巨大化に伴って右上のメニューボタンも届きづらくなる事態に…押しづらい…。
更にiOS7のフラットデザイン化でダサさが顕著になったりステータスバー(時計の部分)にアプリ画面が被ってたり…うむむ

このままでは不便・ダサい極まりないのでアプリのバージョンアップに手を出してます。

流行りに乗ってBootstrap3ベースのフラットデザインで構築、下部にメニューバーを持ってきました。
アイコンもBootstrap3のウェブフォントです。簡単便利!



そしてメニューですがこれまで右側からスライドするようにメニューを表示してましたがそれも撤廃、iOS7の半透明レイヤーを意識したメニューにしました。
PhoneGap(HTML+CSS+JS)で構築してるのでこのレイヤーメニューもJavaScriptで力技で表現してます。(jQueryプラグインとして公開してます)



メニューもフラットな感じで。ちょっとシンプルすぎるので何か足したいところ。

Webの方の管理画面なども合わせるようにやってるのでなかなかに大変。
でもアプリ(ウェブアプリも)ってやってて楽しいですねー。

さて、ストア公開までもう少し粘ってみます。
iOS7っぽい背景がボケたメニューを開くjQueryプラグイン


 を、勢いで作ってみますた。
ネイティブに比べればなんちゃってですが、使ってみて下さいな。

使い方は簡単なので、ソースを参照してください〜

サンプルはこちら↓

2013.09.17 gitHub公開しましたー




これでウェブでもiOS7気分が味わえますね!(?)
えんじょいっ