SmartPhoto.js

JavaScript

レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージビューアを実装することができます。写真の短辺側が画面の最大になるポイントまで拡大表示されるのが特徴です。スマホで写真を大きく表示させたい人は要チェックですね。

SmartPhoto.js

SmartPhoto.js

上記のページでは、サムネイル画像をクリックするとイメージビューアが立ち上がり拡大された画像を見ることができます。背景が黒になっているので、写真に集中してじっくり楽しみたい人にはピッタリですね。

左右には前後移動できる矢印ボタンも設置されているほか、キーボードの矢印キーからでも写真の前後移動が可能です。また、拡大された画像の下にはサムネイル画像の一覧も設置されているので、ここから目的の画像を拡大表示させることもできます。

もちろんレスポンシブ対応なので、ブラウザ幅を変更してもそれに合わせて最適化されます。

イメージビューアを閉じる場合は、右上の「×」をクリックします。このほか、キーボードのescキーからでも閉じることができます。

iPhoneからもチェックしてみましたが、スワイプやピンチイン・ピンチアウトなどにも対応していてとても操作しやすかったです。

ほかにも、いろいろな機能やオプションも用意されているので、気になる方はぜひチェックしてみてください。

スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました

関連記事

  1. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  2. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  3. EZ Tabs jQuery Plugin
  4. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  5. no-image

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

  6. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP