[JavaScript] 이미지 클릭 시 다음 페이지에 해당 이미지 띄우기

이번은 쇼핑몰 또는 서점 웹사이트와 같이 이미지를 클릭하면 다음 페이지에서 해당 이미지를 큰 모습으로 상세화면으로 보이도록 하는 코드를 개발하고자 하였다.

 

ex) 서점에서 마음에 드는 책을 고르면 다음페이지로 넘어가 그 책의 사진이 그대로 있고 설명되어 있는 페이지

 

이 방법을 어떻게 구현할까 지속적인 고민을 해보고 라우팅 방식으로 URL에 이미지 정보를 넘겨주고 받아서 보여주는 방식으로 개발하고자 하였다.

 

먼저 클릭한 이미지에 대한 정보를 알아오기 위해 클릭한 이미지의 src 값을 받아오는 코드를 작성하였다.

 

선택할 이미지 리스트는 아래와 같이 6개가 있다.

 

선택할 이미지 리스트

선택한 이미지에 대한 src 값을 가져오고자 아래와 같은 코드를 작성하였다.

var test = document.getElementsByClassName("post-pic");

6개의 이미지가 모두 post-pic이라는 클래스로 감싸져있기에 위와 같은 방법을 시도했으나 아래와 같은 결과를 나타냈다.

코드 결과

위와 같은 결과가 뜬 이유는 하나만 선택되는 것이 아닌 post-pic 클래스를 가진 모든 이미지가 한번에 선택되기에 발생한 결과였다. 따라서 선택한 하나의 이미지의 정보만 가져오기 위한 코드를 새로 개발해야했고 따라서 아래와 같이 코드를 재작성하였다.

$(".post-pic").click(function () {
    var imgElements = $(this).attr("src");
    location.href = "/test2?src=" + imgElements;
});

위와 같은 코드를 통해 원하는 결과값을 받아올 수 있었다.

여기서 attr 사용한 이유는 그냥 src 받아오면 http://localhost:3000/images/3/poster4.png 라는 결과를 출력하기 때문이다. 하지만 라우팅으로 넘겨서 받아와 바로 src에 대입하려면 /images/3/poster4.png 라는 정보만 필요하기에 attr 사용하였다.

 

또한 location.href를 통해 받은 정보를 URL을 통해 다음 페이지로 넘겨주었다.

 

이후, 다음 페이지에서는 URL을 통해 받은 이미지 src 정보를 원하는 이미지 div에 대입하기 위한 코드를 작성하였다.

 

/*URL Parsing */
const oParams = getUrlParams();

function getUrlParams() {
    var params = {};

    window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
        function(str, key, value) {
            params[key] = value;
        }
    );

    return params;
}

var val = location.href.substr(location.href.lastIndexOf('=') + 1);

$("#rep-img").attr("src", val);

URL 파싱하는 함수는 원래 내가 자주 사용했던 방식이지만 이번에는 아래의 코드 2줄로 해결할 수 있었다.

var val = location.href.substr(location.href.lastIndexOf('=') + 1);

$("#rep-img").attr("src", val);

위의 코드를 이용하면 val가 아래와 같이 넘어온 url에서 = 뒷부분만 추출한 결과가 되고 rep-img라는 아이디 값을 가진  태그에 다시 src를 부여함으로써 기능을 완성할 수 있었다.