スマホ,タブレット,PC端末に最適な画像を表示するjQuery DataImg
レスポンシブデザインに対応したHTML5,CSS3フレームワークを使うとタグ一つで画像の縦・横サイズを、スマートフォン用、タブレット用、パソコン用に合わせることが簡単に行える。
ただし、基本的に元画像を縮小、拡大しているだけなので、パソコン用の大きな画像をスマートフォン用の小さなサイズにリサイズしてしまうと、画像内のテキストが読めなくなる恐れがある。
予め各端末用の画像を3枚用意し、端末に合わせて自動で切り替えて表示することも良い選択だろう。
jQueryプラグインの「data-img」を利用すれば、それらを容易に行うことができるのだ。
ちょっとした問題としては、imgタグでは無く、divタグにて設定することだろう。
また、仕様を参考にimgタグ化したり、予めファイル名の仕様を決めて一つのdata指定だけで、プラグインが自動でファイル名を組み立てて画像表示するといったアレンジをしても面白いかもしれない。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="data-img.min.js"></script> <div class = "data-img" style = "background-image: url(http://image);" data-sml = "img/400x320.jpg" data-med = "img/800x640.jpg" data-lrg = "img/1000x800.jpg" > $( '.data-img' ).dataImg( { sml: 200, med: 400, lrg: 800, resize: true } ); |
data-img
dev.twoblok.es/data-img/
data-img.min.jpダウンロード
github.com/twoblokes/data-img-jquery