프로그래밍/블로그

[티스토리] 이미지 클릭 시 새 탭으로 열기

당근천국 2023. 2. 4. 15:30

언제부터인가....

이미지를 클릭하면 무조건 레이어팝업으로 뜨는 것을 알게 됐습니다.

 

티스토리의 레이어 팝업 이미지는 확대축소가 안 돼서 안 쓰고 있던 건데 말이죠.

 

비활성화 하려고 플러그인을 확인했는데.....

없다고????

 

없어서 찾아보니 플러그인이 삭제됐다고 합니다.

근데 기능은 왜 남아 있어????

 

 

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);
	});
}

 

 

이제 본문의 이미지를 클릭하면 원본 이미지가 새 탭에 열리게 됩니다.

 

 

마무리

레이어 팝업으로 이미지 보는 기능 개선도 안 하고 디폴트로 넣을 생각을 한 건 무슨 생각인지 알 수가 없네요.

유저가 이미지를 클릭한다는 건 그 이미지를 관심 있게 보고 싶다는 소리인데 클릭한게 확대도 안 되고 원본 크기로 보지도 못할거면 클릭하는 데 무슨 의미가 있다고 말이죠;;;

저작자표시