今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. シンプルな日付選択フォームを実装「Date Selector」
  3. マウス操作でくるくる回せる円形の画像ギャラリー「Tiny Circleslider」
  4. シンプルなレスポンシブ・トップメニュー「PrMenu」
  5. 入力した文字数/最大文字数をカウント「BootStrap Maxlength」

デバイスに応じて読み込む画像を変える「Multisource Image」

スポンサーリンク

デバイスに応じて読み込む画像を変更するプラグイン「Multisource Image」を紹介します。

jQueryプラグイン「Multisource Image」

このプラグインを使えば、ブラウザー(デバイス)の幅に応じて、読み込む画像を変えることができます。

画像を切り替える幅をオプションで指定することもできます。スマホ・タブレット・デスクトップの解像度に応じて、お好みの画像を表示させることができますね。

スポンサーリンク

それではデモページをご覧ください。

「Multisource Image」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Multisource Image のデモでーす。">
<title>Multisource Image - jQuery Plugin Demo</title>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/multisource-image/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Multisource Image</h1>
<p>ブラウザーの幅を変えて、ページを更新してみてください。</p>
<img src="images/image-tablet.png" 
    data-src-mobile="images/300.png"
    data-src-tablet="images/512.png"
    data-src-desktop="images/800.png"
    data-src-big="images/1024.png"
    alt="Image image" />

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.mimage.js"></script>
<script>
$(function() {
  $.mImg({
    selector: null,
    onresize: false,
    loader: true,
    loaderImg: undefined,
    sizes: {
      mobile: 400,
      tablet: 640,
      desktop: 1280
    }
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)