SmartPhoto.js

JavaScript

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

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

SmartPhoto.js

SmartPhoto.js

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

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

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

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

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

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

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

関連記事

  1. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  4. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  5. universal-tilt.js

    JavaScript

    パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

    universal-tilt.jsはパララックスやスケールなど多彩なチ…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP