スマホで表示したときだけ画像を別窓で表示するリンクを挿入するJS

スマートホン向けデザインで挿絵の扱いに困る場合が多々あります。イメージ写真などは多少表示が小さくても雰囲気が伝われば、その役目を果たすことができます。しかし、細かい文字が入ったり、複雑な図表の場合扱いに非常に困ります。

その際に苦肉の策でするのが、画像を別窓で表示し、ユーザーが拡大縮小できるようにする方法です。

今回はこの施作をする際に使用するJSを紹介します。

HTML

<p class="link-img"><img src="aaa.png"></p>

html側はクラスを指定するだけです。

JS

$(window).load(function() {
  jQuery(function(){
    var w = jQuery(window).width();
    var x = 667;
    if (w <= x) {
      $(function() {
        $('.link-img').each(function() {
          //.link-img内のHTMLを取得
          var str = $(this).html();
          $(this).html($('<a target="_blank">').attr('href', $(this).children().attr('src')).append(str + '</a>'));
        });
      });
    }
  });
});

JS側は上記のJSを読み込んでください。jQueryを使用しておりますので、そちらも読み込んでください。

これでスマートフォン表示では自動的に画像が別窓表示でリンクされます。参考にしてみてください。