SmartPhoto.js

JavaScript

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

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

SmartPhoto.js

SmartPhoto.js

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

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

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

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

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

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

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

jquery.simple-scroll-followスクロールに従って要素を固定したり移動したりできる「jquery.simple-scroll-follow」前のページ

垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline」次のページVertical Timeline

関連記事

  1. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  2. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  3. JavaScript

    レスポンシブ対応のカッコイイLightbox風jQueryプラグイン「Lightcase」

    Lightcaseはフレキシブルでレスポンシブに対応したLightbo…

  4. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  5. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  6. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP