확대/축소 뷰어를 웹 페이지에 연결

1. 왼쪽의 [자산 라이브러리] 패널에서 URL을 복사하려는 확대/축소 뷰어가 들어 있는 자산 폴더를 탐색합니다.

2. [자산 찾아보기] 패널 위의 도구 모음 오른쪽에서 다음 중 하나를 수행합니다.

   • [그리드 보기] 또는 [목록 보기] 를 클릭합니다. [자산 찾아보기] 패널에서 단일 자산을 두 번 클릭하여 [세부 사항 보기]에서 엽니다. 오른쪽의 [URL 및 임베드 코드] 패널에서 원하는 뷰어의 오른쪽에 있는 [URL 복사] 를 클릭합니다.

   • [그리드 보기] 를 클릭합니다. [자산 찾아보기] 패널에서 단일 자산을 선택하고 썸네일 이미지 아래에서 [미리 보기] > [뷰어 목록] 을 클릭합니다.

     [뷰어 목록] 페이지에 있는 테이블의 [작업] 열에서 [URL 복사] 를 클릭합니다.

   • [목록 보기] 를 클릭합니다. [자산 찾아보기] 패널에서 단일 자산을 선택하고 썸네일 이미지 오른쪽에서 [미리 보기] > [뷰어 목록] 을 클릭합니다.

     [뷰어 목록] 페이지에 있는 테이블의 [작업] 열에서 [URL 복사] 를 클릭합니다.

   • [그리드 보기] , [목록 보기] 또는 [세부 사항 보기] 를 클릭합니다. 동일한 도구 모음에서 [미리 보기] > [뷰어 목록] 을 클릭합니다.

     [뷰어 목록] 페이지에 있는 테이블의 [작업] 열에서 [URL 복사] 를 클릭합니다.

일반적으로 웹 사이트 방문자는 [확대/축소] 아이콘을 먼저 선택하여 이미지를 확대/축소합니다. 대체로 이 아이콘은 돋보기 이미지를 표시합니다. 이 아이콘을 선택하면 팝업 창에서 이미지를 표시하는 동적 웹 페이지(ASP 또는 JSP)가 시작됩니다. 방문자는 실제로 이 팝업 창에서 이미지를 확대/축소합니다.

다음은 IT 직원이 확대/축소 팝업 창을 열기 위해 만들 수 있는 코드 예제입니다.

<a href="javascript:zoom_window();"> 
<img src="http://www.scene7.com/images/buttons/zoomMag.gif" width="50" height="50" border="0" /></a>

이 링크는 zoom_window() 라는 JavaScript 함수를 호출합니다. zoom_window() 함수는 웹 페이지의 HTML 코드에서 </HEAD> 태그 위에 배치됩니다.

<script language="javascript"> 
<!-- 
function zoom_window() { 
window.open("http://s7d4.scene7.com/s7ondemand/zoom/flasht_zoom.jsp 
?company=S7Web&sku=Backpack1&zoomwidth=420&zoomheight=470& 
vc=skin=/is-viewers/flash/basicZoomSkin.swf","", "toolbar=no,location=no,directories=no," 
+ "status=no,menubar=no,scrollbars=yes"+ "resizable=yes,width=500,height=450,top=0,left=0,right=0,bottom=0") 
} 
--> 
</script>

팝업 창의 URL은 Scene7 URL( http://s7d4.scene7.com/s7ondemand/zoom/flasht_zoom.jsp )입니다. 이 URL은 확대/축소 Flash 뷰어와 마스터 이미지가 포함된 확대/축소 팝업 창(JSP 페이지)을 호출합니다. JSP 페이지, 확대/축소 뷰어 및 마스터 이미지는 모두 Scene7 서버에 있습니다. 코드의 Scene7 URL을 해당 확대/축소 URL로 바꿉니다.

이 URL에서 SKU 매개 변수( &sku=Backpack1 )를 확인합니다. &sku= 뒤의 문자열은 Backpack1 입니다. 각 제품의 확대/축소 기능 팝업 링크에는 표시할 제품 이미지를 Scene7 JSP 페이지에 지정하는 다른 제품 SKU가 포함되어 있습니다.

사용자가 제품 세부 사항 페이지에서 화면을 시작하는 확대/축소 기능 링크를 선택합니다.

임베드 코드 기능을 사용하면 선택한 확대/축소 뷰어의 뷰어 코드를 검토할 수 있습니다. 또한 뷰어 배포를 위해 코드를 클립보드로 복사하여 웹 페이지에 붙여넣을 수도 있습니다. 코드 편집은 [임베드 코드] 대화 상자에서 허용되지 않습니다.

확대/축소 뷰어의 임베드 코드를 복사하려면

1. 왼쪽의 [자산 라이브러리] 패널에서 임베드 코드를 복사하려는 확대/축소 뷰어가 들어 있는 자산 폴더를 탐색합니다.

2. [자산 찾아보기] 패널 위의 도구 모음 오른쪽에서 다음 중 하나를 수행합니다.

   • [그리드 보기] 를 클릭합니다. [자산 찾아보기] 패널에서 단일 자산을 두 번 클릭하여 [세부 사항 보기]에서 엽니다. 오른쪽의 [URL 및 임베드 코드] 패널에서 원하는 뷰어의 오른쪽에 있는 [임베드 코드] 를 클릭합니다.

   • [그리드 보기] 를 클릭합니다. [자산 찾아보기] 패널에서 단일 자산을 선택하고 썸네일 이미지 아래에서 [미리 보기] > [뷰어 목록] 을 클릭합니다.

     [뷰어 목록] 페이지에 있는 테이블의 [작업] 열에서 [임베드 코드] 를 클릭합니다.

   • [목록 보기] 를 클릭합니다. [자산 찾아보기] 패널에서 단일 자산을 선택하고 썸네일 이미지 오른쪽에서 [미리 보기] > [뷰어 목록] 을 클릭합니다.

     [뷰어 목록] 페이지에 있는 테이블의 [작업] 열에서 [임베드 코드] 를 클릭합니다.

   • [그리드 보기] , [목록 보기] 또는 [세부 사항 보기] 를 클릭합니다. 동일한 도구 모음에서 [미리 보기] > [뷰어 목록] 을 클릭합니다.

     [뷰어 목록] 페이지에 있는 테이블의 [작업] 열에서 [임베드 코드] 를 클릭합니다.

3. [임베드 코드] 대화 상자에서 [클립보드에 복사] 를 클릭합니다.

   코드 편집은 [임베드 코드] 대화 상자에서 허용되지 않습니다.

4. [닫기]를 클릭합니다.