[JS]デスクトップでもスマホでも操作が軽快！画像の拡大表示をシンプルなコードで実装 -simplebox.js
Post on:2015年11月13日
sponsors
レスポンシブ対応で、デスクトップでもタブレットでもスマホでも操作が軽快な画像を拡大表示する超軽量（722Bytes）のjQueryのプラグインを紹介します。
simplebox.js
simplebox.js -GitHub
simplebox.jsのデモ
デモはデスクトップでもタブレットでもスマホでも動作します。
画像がちょっと味気ないですが、クリック・タップすると、フェードを伴って画像が拡大されます。元に戻す時はもう一度クリック・タップか、右上のxか、Escキーです。
デモページ: 幅1,200pxで表示
スマホサイズでも操作がシンプルなので、非常に快適です。
デモページ: 幅480pxで表示
simplebox.jsの使い方
Step 1: 外部ファイル
当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link rel="stylesheet" type="text/css" href="css/simplebox.css"> </head> <body> ... コンテンツ ... <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/simplebox.js"></script> |
Step 2: HTML
img要素に「.slb」を加えます。
|
1 |
<img class="slb" src="image.png" alt="オルト" /> |
Step 3: JavaScript
jQueryのセレクタで適用する要素を指定し、スクリプトを実行します。
|
1 2 3 |
<script type="text/javascript"> $('.slb').simplebox(); </script> |
オプションで、フェードのスピードを調整できます。
|
1 2 3 4 5 |
<script type="text/javascript"> $('.slb').simplebox({ fadeSpeed: 350 }); </script> |
sponsors
