SmartPhoto.js

JavaScript

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

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

SmartPhoto.js

SmartPhoto.js

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

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

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

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

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

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

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

関連記事

  1. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  2. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  3. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  4. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  5. Rain & Water Effect Experiments
  6. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ

Instagram始めました

Facebookページ

PAGE TOP