[WEB] スマートな画像の見せ方
14 03 2016
スマートな写真の見せ方が素敵なzoom.js
「zoom.js」は、記事にある写真を見るときに、とってもスマートに素敵に写真を見せてくれます。
画像を拡大した後、元に戻す方法も、「クリック」、「スクロール」、「Escボタン」で元に戻るので動作に無駄がなくていいですね。
必要なcss、scriptを読み込みます。
<head> <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ・・・ コンテンツ ・・・ </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="js/zoom.js"></script> </body> </html>
次に画像のimg要素に「data-action="zoom"」を加えて、画像の大きさはcssで調整で完成です。
詳しい動きはデモサイトをご覧ください。
<img src="img/palm.jpg" data-action="zoom">
「zoom.js」の動作で画像の見やすさと、動作に無駄がないところがいいですね。
以上「zoom.js」のご紹介でした。
