コーディング

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

2017.07.26

スマホで表示したときだけ画像を別窓で表示するリンクを挿入する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を使用しておりますので、そちらも読み込んでください。

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

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。