jQueryでサイズ不定な画像ファイルを縦横どちらかの長辺で合わせてもらってお行儀よく並んでいただくjQueryプラグイン2。

開発の経緯

画像ファイルは縦撮りだったり横撮りだっりする上に、画像解像度もまちまち何ですけど、とりあえず長辺どっちかで自動的に表示する方法考えてください。

と言われたのでJavaScriptで組みたい私はちょっと考えてみた次第です。

どっちかに合わせて見る

奥さんが晩御飯の生姜焼きを支度している傍ら、愛機MacBook Airを持ち込んでダイニングプログラミングを開始。

こんな風に組んでみました。

ちょっと忘れてたことがあって追加しました（汗）。

HTML

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="./js/ImageStyleResizer.js"></script>
<script src="./js/sample.js"></script>

<img data-src="./img/images1.jpeg" class="test" />
<img data-src="./img/images2.jpeg" class="test" />

JavaScript

下記はX或いはYを320ピクセルか240ピクセルに、どちらか長い方を長辺とする指定をしています。

フェイドを指定しているのはチェーンメソッドが成功するか確認してるだけなので、皆さんは真似しないでください。

$('.test').ppImageStyleResizer(320,240);

にするだけで正解を得られます。

//sample.js
$(function ()
{
  $('.test').ppImageStyleResizer(320,240).fadeTo("slow", 0.33).fadeTo("slow", 1.00);
})

なんだよ、ImageStyleResizerって？

はい、今回組んだのはここです。

ImageStyleResizer.js
/**
 * [Image Tag Style Resizer V.1.00]
 * Copyright (c) [2017] [(fD)Pinchos.Ponchos]
 * http://qiita.com/fd2016ta
 * This software is released under the MIT License.
 * @param  {[type]} $
 * @return {[type]}
 */
(function( $ )
{

  /**
   * [Image Tag Style Resizer]
   * I will apply the style to the long side.
   * @param  {[type]} maxX [Max Width px]
   * @param  {[type]} maxY [Max Height px]
   */
  $.fn.ppImageStyleResizer = function(maxX, maxY)
  {
    var imageWidth;
    var imageHeight;

    var resultX;
    var resultY;

    this.hide();

    for(var indexElement = 0 ; indexElement < this.length ; ++indexElement ) {

      $(this[indexElement]).attr('src', $(this[indexElement]).attr('data-src'));

      imageWidth = $(this[indexElement]).width();
      imageHeight = $(this[indexElement]).height();

      if (imageWidth > imageHeight) {
        resultX = maxX;
        resultY = imageHeight * (maxX / imageWidth);
      } else {
        resultX = imageWidth * (maxY / imageHeight);
        resultY = maxY;
      }

      $(this[indexElement]).css({'width': resultX, 'height': resultY});
      $(this[indexElement]).show();
    }

    return (this);

  };
})(jQuery);

jQueryと組み合わせるといい感じになりました。