webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

sp pc 画像変換

レスポンシブデザインでPC用の画像と、SP用の画像を変えるときに使うスクリプト。今回の案件では、bxsliderの画像(比率)をPCとSPで変えるため、PCとSPでボタンの画像を変更するために使いました。

 

1.

画像のフォルダに、PCとSP用の画像を用意しておきます。

PC用は「******_pc.jpg」のように「_pc」を画像のファイル名につける。

同様にSP用の画像には「_sp」を末尾に着ける。

 

2.

html を記述するときは、pc用の画像を参照するように書いておく。

 

3.

<img>タグには「switch」クラスを付与。

<li><a href="#"><img src="./common/images/sliderpic1_pc.png"  class="switch"></a></li>

 

4.

PCとSPの共通のCSS(common.cssなど、、、)に以下の記述を追加する。

.switch{

visibility: hidden;

}

 

5.

以下のスクリプトを全ファイル共通のjsファイル、default.jsなど、、、に記述する。

"replace width= 767"の部分はメディアクエリーの切り替えサイズに合わせて書き換えてください。

 

//  SPimage switch
$(function(){
var $setElem = $('.switch'),
pcName = '_pc',
spName = '_sp',
replaceWidth = 767;

$setElem.each(function(){
var $this = $(this);
function imgSize(){
var windowWidth = parseInt($(window).width());
if(windowWidth >= replaceWidth) {

$this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'});
} else if(windowWidth < replaceWidth) {
$this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'});
}
}
$(window).resize(function(){imgSize();});
imgSize();
});
});