Home
Menu
Side
Twitter
Top
ホーム / Blogger | ブログ | ブログカスタマイズ |

2枚の画像を比較できる。画像比較スライダー 【 Beer Slider 】 を Blogger ブログに導入

2019/07/16

Blogger ブログ ブログカスタマイズ

こんにちは。HARU（ @HARU ）です。

今回は 2 枚の画像を比較したいときに使える Beer Slider の紹介と導入についてお伝えしたいと思う。

私が初めてブログテンプレートを編集し、追加した機能がこの Beer Slider だけど、結果として導入に2日間も費やしてしまった。わかってしまえば30分もかからず導入できるので是非参考にしてほしい。

外部参考記事

Beer Slider

Beer Slider 概要

Beer Slider は、 2 枚の画像を比較したいときに使える Script になる。

画像を編集する前、後の比較などには最適な Script だ。

実際に動作を確認してみよう。

画像中心のスライダーをドラッグ、または比較対象のどちらかの画像をクリックすることで、横に並べた画像をその場で比較することができる。

Beer Slider 比較イメージ前
Beer Slider 比較イメージ後

JQuery の導入

JQuery の導入をしていない場合、以下の script を <head> の直下に貼り付ける。

  
    <!-- JQuery -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

Beer Slider の導入

（１）JQuery の真下に、下記の「<link XXX>」を記載する。

  
    <!-- Beer Slider : CSS -->
    <link href='https://unpkg.com/beerslider/dist/BeerSlider.css' rel='stylesheet'/>

（２）</body> の直上に下記 script を記載する。

  
    <!-- Beer Slider -->
    <script src='https://unpkg.com/beerslider/dist/BeerSlider.js'/>

（３）</body> の直上に下記 script を記載する。

  
    <script>
      $.fn.BeerSlider = function ( options ) {
        options = options || {};
        return this.each(function() {
          new BeerSlider(this, options);
        });
      };
      $('.beer-slider').BeerSlider({start: 50});
    </script>

{start: 50} の数値を変更すると、スライダーの中央初期値が変更される。

大体のコード位置

  
    <html>
    <head>

      <!-- JQuery -->
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

      <!-- Beer Slider : CSS -->
      <link href='https://unpkg.com/beerslider/dist/BeerSlider.css' rel='stylesheet'/>

    </head>
    <body>

      <!-- Beer Slider -->
      <script src='https://unpkg.com/beerslider/dist/BeerSlider.js'/>

      <script>
        $.fn.BeerSlider = function ( options ) {
          options = options || {};
          return this.each(function() {
            new BeerSlider(this, options);
          });
        };
        $('.beer-slider').BeerSlider({start: 50});
      </script>

    </body>
    </html>

Beer Slider の使い方

ブログ記事本文に HTML で下記のように記載すると beer slider が反映される。

  
    <div id="beer-slider" class="beer-slider" data-beer-label="before">
      <比較前img>
        <div class="beer-reveal" data-beer-label="after">
          <比較後img>
        </div>
    </div>

なお同じページに複数のスライダーを配置する場合、「div id="beer-slider2"」などidを変える必要がある。

  
    <div id="beer-slider2" class="beer-slider" data-beer-label="before">
      <比較前img>
        <div class="beer-reveal" data-beer-label="after">
          <比較後img>
        </div>
    </div>

まとめ

画像比較するための script はいくつかあるみたいだけど、比較的簡単に実装できる Beer Slider は特にオススメな Script だ。

CSS でカスタマイズすることで、スライダーを見やすくすることもできるだろうから時間があるときにやってみようと思う。

QooQ