【jQuery】サムネイルをクリックするとメイン画像が切り替わる方法

<div class="container">
  <div class="main-img js-main-img">
    <img src="画像1"/>
  </div>
  <ul class="sub-img js-sub-img">
    <li class="current"><!-- アクティブな画像の枠線を変更 -->
      <img src="画像1"/>
    </li>
    <li>
      <img src="画像2"/>
    </li>
    <li>
      <img src="画像3"/>
    </li>
  </ul>
</div>

$(function () {
  $(".js-sub-img img").on("click", function () {
    // mainに切り替えるimgのsrc取得
    img = $(this).attr("src");
    // currentクラス付け替え(枠線などを変えたい時に)
    $(".js-sub-img li").removeClass("current");
    $(this).parent().addClass("current");
    // fadeOutできたらsrc変更してfadeIn
    $(".js-main-img img").fadeOut(50, function () {
      $(".js-main-img img")
        .attr("src", img)
        .on("load", function () {
          $(this).fadeIn();
        });
    });
  });
});