이미지 클릭 시 다른 이미지 보여주기

포럼에 답변하기 위해 작성하는 포스팅!

 

라이트 박스 플러그인 사용중이고 본문 이미지 클릭 시 다른 이미지가 보여지길 원한다면!

(보통은 이럴 필요가 전혀 없지만..)

 

스킨편집 >  html 편집으로 가서 하단 </body> 윗줄에 아래 내용 추가

 

<script>
(function(){
	var lbs = document.querySelectorAll('span[data-lightbox]');
	for (var i=0; i<lbs.length; i++) {
		var lb = lbs[i];
		var lbImg = lb.querySelector('img');
		if (lbImg && lbImg.dataset.alt) {
			lb.dataset.url = lbImg.dataset.alt;
		}
	}
})();
</script>

그리고나서 글 작성 시에는, 

 

일단 평소처럼 이미지를 모두 올리며 글을 쓴 후 저장하기 전에 html 모드로 변경해서 이미지당 아래처럼 클릭 시 대신 보여질 이미지의 주소를 data-alt 로 추가해줌

 

치환자가 들어 있는 관계로 에디터에 쓸수가 없기에 이미지로 보여드립니다

 

....height="NaN" data-alt="....대체할 이미지 주소..." data-ke....

 

이렇게요. 

 

아래는 실제 적용 사례 (클릭해 보세욤)

 

조금 수작업이지만... 그래도 이 방법말고는 없을 듯 합니다.

 

그리고 대체 이미지도 업로드해야 한다면 일단 그냥 보이게 업로드 하고 주소만 추출한 후 본문에서 지워버리는 꼼수가 있겠습니다.

 

끝~