サイトデザインの確認のために、
全体を一枚のJPGで書き出してサクッとブラウザで確認してもらいたい時に
ブラウザの幅を広げると大きな画像に、狭めると別に用意した小さな画像を表示させたい!
HTMLだけでは画像の差し替えは出来ないし、
CSS のbackground-imageとメディアクエリでやってみたけどうまくいかない。
長ーーーい縦スクロークがうまく表示されないのだ。
いつものようにググってみると、
jQueryで実現出来るらしい。
■設置手順
まずはじめに、画像を用意。
画像ファイルは末尾に_spと_pcのついた2種類を用意して、マークアップ時には_spを記述しておく。
ってことは、○○○_sp.jpgと○○○_pc.jpgの画像を用意して、
HTMLには、spの方だけ書いておくのね。
1 2 3 |
<HTMLの記述> <img src="image_sp.png" alt="" class="js-image-switch"> |
画像を切り替えるためのスクリプトはこれ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
$(function() { // 置換の対象とするclass属性。 </code><span style="font-family: Consolas, Menlo, Courier, monospace; font-size: 0.92857rem; line-height: 1.4; background-color: transparent;"> var $elem = $('.js-image-switch'); // 置換の対象とするsrc属性の末尾の文字列。 var sp = '_sp.'; var pc = '_pc.'; // 画像を切り替えるウィンドウサイズ。 var replaceWidth = 768; function imageSwitch() { // ウィンドウサイズを取得する。 var windowWidth = parseInt($(window).width()); // ページ内にあるすべての`.js-image-switch`に適応される。 $elem.each(function() { var $this = $(this); // ウィンドウサイズが768px以上であれば_spを_pcに置換する。 if(windowWidth >= replaceWidth) { $this.attr('src', $this.attr('src').replace(sp, pc)); // ウィンドウサイズが768px未満であれば_pcを_spに置換する。 } else { $this.attr('src', $this.attr('src').replace(pc, sp)); } }); } imageSwitch(); // 動的なリサイズは操作後0.2秒経ってから処理を実行する。 var resizeTimer; $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { imageSwitch(); }, 200); }); });</span> |
このスクリプトはHTMLファイルの中の<head></head>の間に<script></script>で囲って記述。
サーバーにアップして、ページを確認するとバッチリ!!思った通りの動きです。
下記ページで公開しているスクリプトを使わせていただきました。
解説もくわしく載っているので、とってもわかりやすかったですよ。
TAM inc.様に感謝!
参照:http://www.tam-tam.co.jp/tipsnote/javascript/post8851.html