bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptタッチフレンドリーでモバイルでも快適に動作する「simplelightbox」JavaScript2018.01.30タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」simplelightboxはレスポンシブ対応でタッチフレンドリーなlightboxを実装できるjQueryプラグインです。スワイプジェスチャーで前後の画像を快適に切り替えていくことができます。パソコンからの閲覧だけでなくスマホなどでも快適に動作するのがいいですね。simplelightbox以下のページからsimplelightboxの実際のデモ動作をチェックできます。デモデモではいくつかのサムネイル画像が並べられており、いずれかの画像をクリックすると拡大画像が表示されます。左右の両端には矢印アイコンが設置されています。ここから前後の画像に切り替えることが可能です。モバイル版ではスワイプジェスチャーでサクサクと前後の画像へ切り替えられます。キーボードもサポートされていることから、キーボードの左右矢印キーからでも画像の切り替えが可能です。左上には画像の総数と現在表示されている画像の番号が記載されているので、現在どの位置にいるのかを把握しやすくなっています。拡大画像を閉じる場合は右上にあるバツ印や画像の外側をクリックすると最初のサムネイル画像一覧ページに戻ります。拡大時には背景に白っぽいオーバーレイがかかるので、画像にも集中しやすいのがいいですね。オプションもかなり種類があり、先ほどのオーバーレイの有無やスピナーやナビの有無、それからキャプション、スワイプ、クローズ、アニメーションスピード、ループなどなど、多彩なカスタマイズが可能になっています。オプションだけでなく、イベントやメソッドもいろいろ用意されているので、気になる人はぜひチェックしてみてください。いうわけで、レスポンシブに対応したタッチフレンドリーなlightboxを実装できるjQueryプラグイン「simplelightbox」の紹介でした。simplelightboxの具体的な使い方やダウンロードは、以下のページからどうぞ。pluginは、1日のイベントスケジ...JavaScriptクイックな開閉で使いやすいアコーディオン実装「Accordion.JS」Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。