jQueryを使用してモーダルウィンドウ上で切り替えを行いたいと思いコーディングしたのですが、
work_image部分をクリックするとモーダルを出す→modal_main_imgに写真切り替えができる様にしました。
しかし、モーダルを閉じても初期化がされない為、次のmodalを出すと、
直前に切り替えを行った画像がmodal_main_img部分に残ってしまう現象が出ています。
モーダルを閉じた際にsrcを初期化できればいいのかなと思うのですが
jqueryをどの様に書き換えれば良いか見当が付きません。。
慣れていないもので情報不足など御座いましたらご連絡頂けると幸いです。
お手数お掛け致しますが宜しくお願い致します。
html
1<div> 2 <a href="#modal1"><div class="details"></div></a> 3 <div> 4 <img class="work_image" src="img/thumb1.jpg" alt=""> 5 </div> 6</div> 7 8<div id="modal1" class="modal hide" > 9 <a href="#" class="modal-close"></a> 10 <div class="modal_contents"> 11 <div class="modal_contents_left"> 12 <img src="img/3.jpg" alt="" class="modal_main_img"> 13 <ul class="thumblist"> 14 <li class="modal_desc selected"> 15 <a href="#" data-img="img/1.jpg"> 16 <img src="img/1.jpg" alt="" class="thumb"> 17 </a> 18 </li> 19 <li> 20 <a href="#" data-img="img/1-2.jpg"> 21 <img src="img/1-2.jpg" alt="" class="thumb"> 22 </a> 23 </li> 24 </ul> 25 </div> 26 </div> 27</div>
css
1.show { 2 display: block; 3} 4.hide { 5 display: none; 6}
javascript
1var currentScroll; 2 function showModal(event) { 3 event.preventDefault(); 4 5 var body = $("body"); 6 var contents = $(this).attr("href"); 7 var $modalWin = $(contents); 8 var $window = $(window); 9 var posX = ($window.width() - $modalWin.outerWidth()) / 2; 10 var posY = ($window.height() - $modalWin.outerHeight()) / 2; 11 var $shade = $("<div><div>"); 12 $shade.attr("id", "shade") 13 .on("click", hideModal); 14 15 currentScroll = $window.scrollTop(); 16 $(body).css({position: 'fixed', width: '100%', top: -1 * currentScroll}); 17 18 $modalWin.before($shade) 19 .css({left: posX, top: posY, "z-index" : "333"}) 20 .removeClass("hide") 21 .addClass("show") 22 .on("click", "button, .modal-close", function () { 23 hideModal(); 24 return false; 25 }); 26 $(".thumblist li a").on("click", function (event) { 27 event.preventDefault(); 28 var $this = $(this); 29 $this.parent().siblings() 30 .removeClass("selected") 31 .end() 32 .addClass("selected"); 33 var imagePath = $this.data("img"); 34 $(".modal_main_img").attr("src", imagePath); 35 }); 36 } 37 function hideModal() { 38 $("#shade").remove(); 39 $('.modal').removeClass("show") 40 .addClass("hide"); 41 $('body').attr({style: ''}).prop({scrollTop: currentScroll}); 42 } 43 $(".show-modal").on("click", showModal);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。