// JavaScript Document

/* jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える
/* 【http://black-flag.net/jquery/20120808-4047.html】
/* 
/* cssで.img-switchにvisibility: hiddenで非表示の設定をしておく
/* 
/* 「$setElem」の部分を「$(‘img’)」とすることで、Webページ上の全ての画像を切り替え対象にすることも可能
/*/

$(function(){
    var $setElem = $('.img-switch'),//切り替え対象とするCSSクラス名
    pcName = '_pc',//PC向けに画像のファイル名（一部）
    spName = '_sp',//スマートフォン向けに画像のファイル名（一部）
    replaceWidth = 767;//切り替えを実行させるウィンドウサイズの値
 
    $setElem.each(function(){
        var $this = $(this);
        function imgSize(){
            if(window.innerWidth > replaceWidth) {
                $this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'});
            } else {
                $this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'});
            }
        }
        $(window).resize(function(){imgSize();});
        imgSize();
    });
});