[JS]デスクトップでもスマホでも操作が軽快!画像の拡大表示をシンプルなコードで実装 -simplebox.js

レスポンシブ対応で、デスクトップでもタブレットでもスマホでも操作が軽快な画像を拡大表示する超軽量(722Bytes)のjQueryのプラグインを紹介します。

サイトのキャプチャ

simplebox.js
simplebox.js -GitHub

simplebox.jsのデモ

デモはデスクトップでもタブレットでもスマホでも動作します。

デモのキャプチャ

デモページ

画像がちょっと味気ないですが、クリック・タップすると、フェードを伴って画像が拡大されます。元に戻す時はもう一度クリック・タップか、右上のxか、Escキーです。

デモのアニメーション

デモページ: 幅1,200pxで表示

スマホサイズでも操作がシンプルなので、非常に快適です。

デモのアニメーション

デモページ: 幅480pxで表示

simplebox.jsの使い方

Step 1: 外部ファイル

当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。

Step 2: HTML

img要素に「.slb」を加えます。

Step 3: JavaScript

jQueryのセレクタで適用する要素を指定し、スクリプトを実行します。

オプションで、フェードのスピードを調整できます。

sponsors

top of page

©2024 coliss