webデザイン今までPCサイトに画像ギャラリー系(Lightbox系)のjQueryにcolorboxをよく使ってたのですが、スマートフォンでの表示に動作があんまりな感じだったのでスマートフォンサイト向けのjQueryのプラグインを探してみました。Valutis内容をみていくと、圧縮版なら4KBと軽量。スマートフォンサイトは軽さが命なので重要です。実装方法これがなかなか簡単に実装できます。CSS以下のスタイルをCSSファイルに記述します。これが画像を拡大表示した時につくスタイルです。);}とbox-shadowの記述も追加しておきます。JSまずjsをダウンロードします。解説ページ中段の「JavaScript」に普通版(imagelightbox.js)と圧縮版(imagelightbox.min.js)があるので今回は圧縮版をダウンロード。リンク先を開いてコピペして、imagelightbox.min.jsのファイル名で保存します。実装するソースは以下のとおり。HTML内に記述します。).imageLightbox();});</script>jqueryのバージョンはとりあえず1.7.1で動きました。「a」の部分は以下、imgタグ内に記述する「data-imagelightbox」の内容と同じであればOKです。/></a>これで完成。簡単!他にもid名の変更やアニメーションの速度などオプションで変更できるのでいろいろ試してみると良いかもしれません。・左右に画像をスワイプすると画像送り・拡大を解除したいときは、拡大画像以外の部分をタップ・画像長押しで画像の保存も可能といった感じでさくさく動きます。Androidでもちゃんと動きました。今回はスマートフォンサイトのみに実装しましたが、レスポンシブにPCサイトにも対応のようです。20:00あなたにおすすめの記事プロフィールid:emj1025Webデザイナー。デザイン・ギター・宅録を少々。このブログでは気になった製品、HTML/CSS、Webデザイン、音楽などを記事にしています。Reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。