jquery モーダルウィンドウでボタン押下毎に初期化を行いたい

Question

jQueryを使用してモーダルウィンドウ上で切り替えを行いたいと思いコーディングしたのですが、
work_image部分をクリックするとモーダルを出す→modal_main_imgに写真切り替えができる様にしました。

しかし、モーダルを閉じても初期化がされない為、次のmodalを出すと、
直前に切り替えを行った画像がmodal_main_img部分に残ってしまう現象が出ています。

モーダルを閉じた際にsrcを初期化できればいいのかなと思うのですが
jqueryをどの様に書き換えれば良いか見当が付きません。。

慣れていないもので情報不足など御座いましたらご連絡頂けると幸いです。
お手数お掛け致しますが宜しくお願い致します。

<div>
    <a href="#modal1"><div class="details"></div></a>
    <div>
        <img class="work_image" src="img/thumb1.jpg" alt="">
    </div>
</div>

<div id="modal1" class="modal hide" >
  <a href="#" class="modal-close"></a>
  <div class="modal_contents">
    <div class="modal_contents_left">
      <img src="img/3.jpg" alt="" class="modal_main_img">
      <ul class="thumblist">
        <li class="modal_desc selected">
          <a href="#" data-img="img/1.jpg">
            <img src="img/1.jpg" alt="" class="thumb">
          </a>
        </li>
        <li>
          <a href="#" data-img="img/1-2.jpg">
            <img src="img/1-2.jpg" alt="" class="thumb">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

.show {
  display: block;
}
.hide {
  display: none;
}

var currentScroll;
    function showModal(event) {
		event.preventDefault();
		
		var body = $("body");
		var contents = $(this).attr("href");
		var $modalWin = $(contents);
		var $window = $(window);
		var posX = ($window.width() - $modalWin.outerWidth()) / 2;
		var posY = ($window.height() - $modalWin.outerHeight()) / 2;
		var $shade = $("<div><div>");
		$shade.attr("id", "shade")
		      .on("click", hideModal);
        
		currentScroll = $window.scrollTop();
		$(body).css({position: 'fixed', width: '100%', top: -1 * currentScroll});
        
		$modalWin.before($shade)
		      .css({left: posX, top: posY, "z-index" : "333"})
		      .removeClass("hide")
		      .addClass("show")
		      .on("click", "button, .modal-close", function () {
			    hideModal();
		        return false;
		    });
        $(".thumblist li a").on("click", function (event) {
          event.preventDefault();
          var $this = $(this);
          $this.parent().siblings()
              .removeClass("selected")
              .end()
              .addClass("selected");
          var imagePath = $this.data("img");
          $(".modal_main_img").attr("src", imagePath);
          });
	}
	function hideModal() {
		$("#shade").remove();
		$('.modal').removeClass("show")
		           .addClass("hide");
		$('body').attr({style: ''}).prop({scrollTop: currentScroll});
	}
	$(".show-modal").on("click", showModal);

Answer 1

srcにimagePathを入れることができているのだから、わかりそうなものですが…
どこかから持ってきたソースなんですかね？

単純に

 function hideModal() {

の中で、

$(".modal_main_img").attr("src", '');

とすれば良いのではないでしょうか？

Answer 2

これでいけませんか？

var currentScroll;
$( '.modal_main_img' ).data( 'img', $( '.modal_main_img' ).attr( 'src' ) );
/* 略 */
function hideModal() {
	$("#shade").remove();
	$( '.modal_main_img' ).attr( 'src', $( '.modal_main_img' ).data( 'img' ) );
	/* 略 */
}

Comments

[rocker_metal]

ご回答ありがとうございます。
上記を試してみたのですが、少し挙動が変わりました。

modal1、modal2、modal3と続けてギャラリーの様にしており、
修正前はmodal2の写真切り替えをしてmodal3に移るとmodal2部分が表示されており、
今回ご教示頂いたコードに修正すると直前の写真切り替えに関わらず
modal2、modal3ともにmodal1の写真が表示される様になりました。

各モーダルを表示する毎に写真を初期化する事は可能でしょうか。。。

[kei344]

「modal1、modal2、modal3」がある前提ならそれを書かないとそもそも解決できません。あなたのコードは回答者に公開されていないので、「可能です」以外何を答えればよいのでしょうか。また、少なくとも質問文のコードは複数ギャラリーに対応しているようには見えません。

ご自分で組んだコードでないのであれば、ギャラリー系ライブラリを利用されてはいかがでしょうか。

【高機能画像ギャラリーを手軽に設置できるjQueryプラグイン「lightGallery」】
http://nelog.jp/jquery-lightgallery

【lightGallery】
http://sachinchoolur.github.io/lightGallery/