読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

ウィンドウサイズによって画像を切り替える

jQuery

レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。
backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。

そこで今回は、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。


スマホサイトの時の画像名
「img_keyvisual_01_sp.jpg」

PCサイトの時の画像名
「img_keyvisual_01_pc.jpg」

この末尾のspとpcを変える事でウィンドウサイズに適した画像に差し替える事が出来ます。


「replaceWidth」で設定する値をもとに
ウィンドウサイズがそれ以上だったら画像ファイル名「_pc」が付いているものを表示し、
それ以下だったら画像ファイル名「_sp」が付いているものを表示します。

window.innerWidth

「window.innerWidth」とはブラウザウィンドウの ビューポート (viewport) の幅を取得出来る。


thisと$thisの違い
  • 「$(this)」はjQueryオブジェクト。
  • 「this」はDOMエレメント。

違いを簡単に説明すると、イベントが発生した要素に対して、javaScriptのメソッドやプロパティを利用したい時は「this」利用し、jQueryで操作したい時は$(this)を利用してjQueryオブジェクトに変換してから利用する。


thisを使った場合

$(function{
	$('a').each(function() {
	var sample = this.href;
	// ここに処理を書く
});
});


$(this)を使う場合

$(function{
$('a').each(function() {
	var sample = $(this).attr('href');
	// ここに処理を書く
});
});
ウィンドウサイズによる画像置換を行いたい画像に「.switch」を追加
<img src="img/img_keyvisual_01_sp.jpg" alt="#" class="switch">

jQueryの記述

$(function(){
//ウィンドウサイズによる画像置換

  var sizeChange = $('.switch'), // 置換の対象とするclass属性。
  pcName = '_pc', // 置換の対象とするsrc属性の末尾の文字列
  spName = '_sp',// 置換の対象とするsrc属性の末尾の文字列
  replaceWidth = 641; // 画像を切り替えるウィンドウサイズ。

  sizeChange.each(function(){
  var $this = $(this);

  function imgSize(){
  if(window.innerWidth > replaceWidth) { // ウィンドウサイズが641px以上であれば_spを_pcに置換する。
   $this.attr('src',$this.attr('src').replace(spName,pcName));
   } else {
      $this.attr('src',$this.attr('src').replace(pcName,spName));
			}
		}

		$(window).resize(function(){//横幅をリサイズした時に上でimgSize関数を有効にする
			imgSize();
			});
	});
});
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>windowサイズによる画像置換</title>
<style>
html,body {
  margin:0;
  padding:0;
}
header {
  width:100%;
}
img {
  max-width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
 var sizeChange = $('.switch'), // 置換の対象とするclass属性。
  pcName = '_pc', // 置換の対象とするsrc属性の末尾の文字列
  spName = '_sp',// 置換の対象とするsrc属性の末尾の文字列
  replaceWidth = 640; // 画像を切り替えるウィンドウサイズ。

sizeChange.each(function(){
  var $this = $(this);
  function imgSize(){
  if(window.innerWidth > replaceWidth) { // ウィンドウサイズが641px以上であれば_spを_pcに置換する。
   $this.attr('src',$this.attr('src').replace(spName,pcName));
   } else {
      $this.attr('src',$this.attr('src').replace(pcName,spName));
			}
		}
$(window).resize(function(){//横幅をリサイズした時に上でimgSize関数を有効にする
			imgSize();
    });
  });
});

</script>
</head>

<body>
<header>
<img src="01_sp.png" class="switch">
</header>
</body>
</html>