이미지 클릭 시, 클릭한 이미지를 원하는 위치에 복사해 가기.

<div class="click-img"> <img src="image.png" alt="이미지 경로" /> </div>

<div class="clone-img"> </div>

.click-img 는

내가 클릭할 이미지를 감싸고 있는 div다.

 

.clone-img는

내가 클릭한 이미지를 복사할 곳이다. 

 

(적절한 css와 jquery 사용으로, 이 .clone-img를 새창 팝업창이나 모바일 모달팝업으로 만들 수도 있다.)

 

그렇다면 이제... javascript를 어떻게 작성해 볼까?

클릭 시 벌어지는 이벤트이니까, 클릭 이벤트리스너를 먼저 구성해 보자.

 

$('.click-img').click(function(){
	
});

 

.click-img 를 클릭했을 때, 어떠한 펑션을 돌리게 하겠다.

어떠한 것을 돌릴까?

 

.clone-img에 내가 클릭한 이미지를 복사해 가고 싶다.

작성해 보자.

 

$('.click-img').click(function(){
	$(this).clone().appendTo('.clone-img'); // 이 것(.click-img)을 복사(clone())해서 첨부하고 싶어 어디에? .clone-img에...
});

 

...끝.

 

아, 그런데 만약 이 .clone-img가 팝업창이 될 경우에는,

팝업창을 닫았을 시 첨부된 이미지가 사라진다는 동작도 표현해 주는 것이 좋을 것이다.

그걸 안할 경우, 만약 클릭할 이미지가 여러개가 된다면, 새로 뜨는 팝업창에는 이전에 클릭했던 <img>들이 마구 쌓일 것이다.

 

앞서 돌았던 스크립트 자체를 초기화해버리는 방법이라던지 여러가지 있겠지만,

난 그냥 이렇게 해 봤다.

 

var imageDelete = null; // 변수명은 알아서 지정하면 됨...
imageDelete = $('.clone-img img').detach(); // .clone-img 내 모든 <img>를 삭제한다.

이걸 팝업의 close button을 클릭했을 때의 이벤트로 사용하면 된다.