오늘의 스킨제작: 라이트박스수정하기

플러그인을 사용하지 않더라도 티스토리에서 그림을 클릭하면 원본 크기의 그림을 어두운 배경과 함께 볼 수 있는 라이트박스(Ligthbox)를 적용합니다. 오늘은 자바스크립트를 이용하여 기능을 변경합니다.

목표

포스트에 그림을 추가하면 티스토리에서는 아래와 같은 마크업으로 변환합니다.

<figure class="imageblock {추가클래스}">
  <span data-url="그림URL" data-lightbox="lightbox" data-alt="">
    <img src="그림URL" srcset="셈네일변형URL" width="100%">
  </span>
</figure>

여기서 라이트박스 이벤트는 span이 담당합니다. 우리는 이 span을 img와 분리해서 별도의 버튼으로 만들게 됩니다.

<figure class="imageblock {추가클래스}">
  <span data-url="그림URL" data-lightbox="lightbox" data-alt="">
    크게보기
  </span>
  <img src="그림URL" srcset="셈네일변형URL" width="100%">
</figure>

스크립트

function lightbox_modify() {
    let wrapper = article.querySelectorAll('figure.imageblock');
    wrapper.forEach(function(elem){
        let img = elem.querySelector('img').cloneNode(true);
        let zoom = elem.querySelector('span');
        zoom.innerHTML = '크게보기';
        elem.prepend(img);
        elem.prepend(zoom);
    });
}

• 부모요소.querySelector( 선택자 ): CSS에서 선택자를 지정하는 문법을 사용하여 DOM 요소를 선택합니다.
• 부모요소.querySelectorAll( 선택자 ): 선택자에 해당하는 모든 DOM 요소를 선택합니다.
  • 복수요소.forEach( 함수(개별요소) ): 요소를 나열하며 콜백함수를 실행합니다.
• 요소.prepend(자식요소): 자식요소를 요소 가장 위로 옮깁니다.