前提・実現したいこと
レスポンシブサイトを作成しております。
ブラウザのサイズを変えた時PC用とSP用の画像を入れ替えたいのですが、
上手く入れ替わってくれません。
画像ファイル格納先のディレクトリが異なっているため、
画像ファイル名を変えるのではなく、「pc」「sp」の
ディレクトリ名の変更を行いたいです。
画像ファイル名はPC・SP共通となります。
宜しくお願い致します。
発生している問題・エラーメッセージ
1つの画像だけを指定した場合は、上手く画像が入れ替わりました。
ただ、2つ以上の画像に対して指定しますと、画像のファイル名が
全て同じ画像のものになってしまいます。
ブラウザの幅を変更すると、PCとSPの変更は出来ているのですが、
すべて同じ画像になってしまいます。
該当のソースコード
HTML
1<img src="images/pc/hogehoge01.jpg" alt="" class="img-sw" /> 2<img src="images/pc/hogehoge02.jpg" alt="" class="img-sw" /> 3<img src="images/pc/hogehoge03.jpg" alt="" class="img-sw" />
javascript
1 2$(function() { 3 4 var $elem = $('.img-sw'); 5 6 var sp = 'sp'; 7 var pc = 'pc'; 8 9 var replaceWidth = 750; 10 11 function imageSwitch() { 12 13 var windowWidth = parseInt($(window).width()); 14 15 16 $elem.each(function() { 17 var $this = $(this); 18 var imgSrc = $elem.attr('src').split('/'); 19 var changePc = $elem.attr('src').replace(imgSrc[1], pc); 20 var changeSp = $elem.attr('src').replace(imgSrc[1], sp); 21 22 if(windowWidth >= replaceWidth) { 23 $this.attr('src', changePc); 24 25 26 } else { 27 $this.attr('src', changeSp); 28 } 29 }); 30 } 31 imageSwitch(); 32 33 34 var resizeTimer; 35 $(window).on('resize', function() { 36 clearTimeout(resizeTimer); 37 resizeTimer = setTimeout(function() { 38 imageSwitch(); 39 }, 200); 40 }); 41});
試したこと
上記のように、色々なサイトを参考に画像パスの一部を変更するように
jQueryを書いてみましたが、もう少しの所のような気がするのですが、
完全に手詰まりになってしまいました。
回答1件
あなたの回答
tips
プレビュー