이 시간에는 제품소개 솔루션을 갤러리샵으로 변경하는 멋진 미션입니다.

제품소개 솔루션에 대해서는 [중급11단]~[중급13단]미션에서 해보았습니다.

오늘 미션에서는 새창으로 제품 플래시갤러리형태를 만드는 방법에 대해서 알아보겠습니다.

 

 

 

 

 

 

 

갤러리샵 형태로 출력하려면 각 제품에 이미지들을 추가해야됩니다.

전체 제품에 이미지들을 각각 삽입하려면 시간이 너무 많이 걸리기 때문에, 필자는 샘플로 1개의 제품에 대해서 이미지를 삽입하도록 하겠습니다.

홈페이지에서 상단의 제품소개를 클릭하면 제품목록이 나타납니다. 여기서 제일 위쪽의 왼쪽제품을 마우스를 올려보면 인터넷창의 왼쪽하단에 주소가 표시되는데, 여기서 idx 번호만 기억하시길 바랍니다.

 

※ 필자의 제품번호(idx)는 597 이랍니다.

 

 

[제품 관리 > 제품 관리 > 제품 관리]로 이동한후 해당하는 idx 번호와 동일한 고유번호의 수정버튼을 클릭하고, 하단의 플래시이미지 갤러리를 펼쳐 이미지들을 추가합니다. 아래의 추가버튼을 눌러 이미지를 추가할 수 있습니다.

 

※ 플래시이미지 갤러리에 이미지들을 추가하게 되면, 자동으로 제품상세보기에 해당 이미지들이 플래시갤러리로 나타납니다.

 

 

홈페이지를 열어서 제품소개를 클릭한 후 해당제품을 클릭합니다.

제품상세설명란에 멋진 플래시갤러리가 삽입되어 있는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

먼저 플래시갤러리만 표시되는 페이지를 만들어보도록 하겠습니다.

[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]로 이동한 후 제품소개의 제품상세보기를 차례대로 클릭하고 아래와 같은 소스를 찾습니다.

 

 

여기서 필요한 소스는 플래시갤러리가 직접실행되는 <script>~</script>로서 아래와 같습니다.

 

현재 소스에서 img_w와 img_h는 400으로 이미지의 크기를 나타내지만 실제로 플래시에서는 사용되지 않습니다.

플래시의 이미지크기를 조절하기 위해서는 [제품 관리 > 제품 관리 > 환경설정]의 "상세정보에서 이미지크기"를 통해서 수정합니다.

 

※ 필자는 이미지의 크기를 가로 500 * 세로 300 으로 설정해보았습니다.

 

 

여기서 주의할 부분이 있습니다! 

위의 <script>~</script>소스는 제품 상세보기화면에서만 실행됩니다. 따라서 위의 소스를 추가페이지나 다른 곳에 붙여넣을 경우에는 실행이 되지 않습니다.

그러면, 제품 상세보기에 2개의 다른 디자인페이지를 만들어야 하는데.. 이럴 경우에 어떻게 해야 할까요?

네~~ 기억하시죠? 이전의 미션들을 잘 수행하셨다면, 이것은 강제접근코드(direct code)를 사용하면 된다는 것을 바로 알 수 있을 것입니다.

 

[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]로 이동한 후 제품소개의 제품상세보기를 차례대로 클릭하고 다음과 같이 product 라는 새로운 강제접근코드를 만들어 줍니다.

 

① 나만의 디자인의 새로만들기를 클릭합니다.

② 디자인 제목을 "제품 플래시갤러리"로 입력합니다.

③ 강제접근코드명을 "product" 로 입력합니다.

④ 편집창에 플래시갤러리소스를 입력합니다.

⑤ 새로만들기 버튼을 클릭합니다.

 

강제접근코드가 제대로 실행되는지 확인하기 위해서 해당제품을 클릭합니다.

현재 주소표시줄의 뒤쪽에 &direct_code=product 를 추가합니다.

 

 

강제접근코드를 추가하면 다음과 같이 상세내용에 제품 플래시갤러리만 표시됩니다.

 

 

위의 강제접근코드를 새창으로 띄우면 상단, 왼쪽, 하단이 다 보이겠죠? 이럴때에는 다음의 팁을 사용하시면 됩니다.

 

 

강제접근코드가 추가된 부분에 적용하면 아래와 같은 소스가 됩니다.

 

 

소스를 적용하면 상세페이지는 상단디자인, 왼쪽디자인, 하단디자인이 없이 출력됩니다.

 

 

 

 

 

 

 

 

거의 다 되어가네요. 이제는 새창으로 링크만 걸어주면 되겠죠?

솔루션에서는 팝업창을 만들수 있는 내장함수가 존재하며, 자주 사용되므로 메모해두시기 바랍니다.

 

 

팝업창 내장함수 popup_window를 이용하여 실제로 제품목록에서 새창으로 열리도록 만들어 보겠습니다.

[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]로 이동한 후 제품소개의 제품목록을 클릭하고 아래와 같이 소스를 수정합니다.

 

※ 새창의 가로와 세로크기는 팝업창인 것을 감안하며 좀더 크게 잡아주세요.

 

 

조금 어려울 수 있으니 삽입된 소스에 대해서 간략히 설명드리겠습니다.

 

 

여기서 pr_read_url은 원래 상세페이지 경로이고, 뒤쪽으로 다이렉트코드 direct_code=product 와 상단/왼쪽/하단을 없애는 me_popup=1 이 추가되었으며, 새창의 크기가 770*420인 것을 알 수 있습니다.

 

이제 완성되었으니 실행해봅시다!

제품목록에서 제품이미지를 클릭하면 원래 제품상세보기화면이 되고, 제품갤러리를 클릭하면 새창으로 제품 플래시갤러리가 열린답니다 ~

 

 

 

 

 

 

 

 

수고하셨습니다. ^^

 

 

완성화면 : http://uhkr50.aramschool.co.kr/product/product_list.htm