언제부터인가....
이미지를 클릭하면 무조건 레이어팝업으로 뜨는 것을 알게 됐습니다.
티스토리의 레이어 팝업 이미지는 확대축소가 안 돼서 안 쓰고 있던 건데 말이죠.
비활성화 하려고 플러그인을 확인했는데.....
없어서 찾아보니 플러그인이 삭제됐다고 합니다.
근데 기능은 왜 남아 있어????
1. 레이어 팝업 제거
검색해보니 이미지를 감싸고 있는 'span'의 'data-lightbox'속성을 제거하면 동작하지 않는다고 합니다.
아래 코드 중 자신에게 맞는 코드를 선택해서 실행하면 됩니다.
실행 시점은 도큐먼트가 모두 바인딩 되고 나서입니다.
예> window.onload(), $(window).onload 등등
//Vanilla JS
document.querySelectorAll("[data-lightbox]")
.forEach((item, idx) =>
{
item.removeAttribute("data-lightbox");
});
//jquery
$("[data-lightbox]").removeAttr("data-lightbox");
바닐라 자바스크립트든 제이쿼리(jquery)든
'data-lightbox'를 가지고 있는 개체를 찾아
'data-lightbox'속성을 제거해주는 코드입니다.
2. 클릭 시 새 탭에 열기
기존의 레이어팝업에 기능을 추가하려고 했는데.....
당장은 시간이 없어서 새 탭에 열기만 추가합니다.
(시간 되는 대로 이 포스팅에 추가하거나 포스팅할 예정입니다.)
사실 대상 개체만 찾으면 쉽습니다.
대상 개체 찾는 게 힘들어서 문제죠 ㅋㅋㅋㅋㅋ
본문에 있는 이미지만 대상으로 해야 하고
티스토리를 오래 썼다면 예전 버전에 맞는 처리도 해야 하죠...
2-1. 대상 이미지 찾기
제가 티스토리를 쓴지 엄청오래됐는데....
그동안 이미지를 감싸는 방식이 몇 번 바뀌면서 지금은 3가지로 검색하고 있습니다.
아래 코드를 참고하여 자신의 블로그에 맞게 본문의 이미지를 검색합시다.
//본문 이미지 찾기
let ContentsImageList = $("#divPostContent > div.tt_article_useless_p_margin")
.find("span > img").toArray();
if (0 >= ContentsImageList.length)
{
ContentsImageList = $("#divPostContent > div.contents_style")
.find("div > img").toArray();
}
if (0 >= ContentsImageList.length)
{
ContentsImageList = $("#divPostContent > div.contents_style")
.find("span > img").toArray();
}
저는 본문 콘텐츠를 감싸는 div의 id가 'divPostContent'입니다.
그래서 '#divPostContent'로 본문 영역을 구분합니다.
각 버전 별로 하나의 방식으로 감싸지므로 이미지가 하나도 없으면 다음 방식의 검색을 합니다.
이렇게 본문에 있는 이미지를 찾아 'ContentsImageList'에 넣습니다.
만약 한 버전으로 검색 가능하다면 바로 반복문 작업해도 됩니다.
2-2. 클릭 이벤트 연결하기
이제 이벤트를 연결하면 됩니다.
여기서 주의할 것은 티스토리의 이미지는 미리 보기용과 상세 보기용이 구분돼있다는 것입니다.
클릭하면 상세 보기용 이미지가 연결되게 되어 있습니다.
이 이미지의 경로를 받아서 새 탭에 열어야 합니다.
상세 보기용 이미지는 부모에게 있는데....
버전에 따라 'href'이나 'data-url'에 들어 있습니다.
위에서 찾은 이미지 리스트(ContentsImageList)에 들어있는 개체들에게 클릭이벤트를 아래와 같이 연결해 줍니다.
1) 바닐라 자바스크립트
for (let i = 0; i < ContentsImageList.length; ++i)
{
ContentsImageList[i].onclick = function ()
{
//debugger;
//'href'로 되어 있는게 있고 'data-url'로 되어 있는게 있다.
let sHref = this.parentElement.getAttribute('href');
if (undefined === sHref || null === sHref)
{
sHref = $(this).parent().attr('data-url');
}
window.open(sHref);
};
}
2) 제이쿼리
//클릭이벤트 추가
for (let i = 0; i < ContentsImageList.length; ++i)
{
$(ContentsImageList[i]).click(function ()
{
//debugger;
//'href'로 되어 있는게 있고 'data-url'로 되어 있는게 있다.
let sHref = $(this).parent().attr('href');
if (undefined === sHref || null === sHref)
{
sHref = $(this).parent().attr('data-url');
}
window.open(sHref);
});
}
이제 본문의 이미지를 클릭하면 원본 이미지가 새 탭에 열리게 됩니다.
마무리
레이어 팝업으로 이미지 보는 기능 개선도 안 하고 디폴트로 넣을 생각을 한 건 무슨 생각인지 알 수가 없네요.
유저가 이미지를 클릭한다는 건 그 이미지를 관심 있게 보고 싶다는 소리인데 클릭한게 확대도 안 되고 원본 크기로 보지도 못할거면 클릭하는 데 무슨 의미가 있다고 말이죠;;;
