설명서Dynamic Media 뷰어 참조 안내서

축소판 thumbnails

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

작성 대상:

  • 개발자
  • 사용자

썸네일은 썸네일 이미지 그리드로 구성되며 오른쪽에 수직 스크롤을 허용하는 선택적 스크롤 막대가 있습니다.

축소판은 기본 컨트롤 막대에서 축소판 단추를 클릭하여 전환됩니다. 썸네일이 활성화되면 뷰어 사용자 인터페이스 맨 위에 오버레이된 모달 모드로 표시됩니다. 뷰어 로직은 자동으로 썸네일 컨테이너의 크기를 전체 뷰어 영역으로 조정합니다.

썸네일 컨테이너의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview

CSS 속성
설명
상위
뷰어 상단에 있는 썸네일 컨테이너의 세로 오프셋입니다.
여백-상단
상단 여백입니다.
여백-왼쪽
왼쪽 여백입니다.
여백-오른쪽
오른쪽 여백입니다.
여백-하단
맨 아래 여백입니다.
배경색
축소판 영역의 배경색입니다.

예 - 0xDDDDDD 배경을 사용하여 썸네일을 상단에서 32픽셀 오프셋하고, 왼쪽과 오른쪽에 5픽셀 여백, 아래쪽에 8픽셀 여백을 두도록 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview {
 top: 32px;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 8px;
 background-color: rgb(221, 221, 221);
}

썸네일 간의 간격은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell

CSS 속성
설명
여백
각 썸네일 주변의 가로 및 세로 여백 크기입니다. 실제 가로 썸네일 간격은 .s7thumbcell 에 대해 설정된 왼쪽 및 오른쪽 여백의 합과 같습니다. 세로 축소판 간격은 위쪽 여백과 아래쪽 여백의 합과 같습니다.

예 - 세로 및 가로로 모두 10픽셀 공간을 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumbcell {
 margin: 5px;
}

개별 썸네일의 모양은 다음 CSS 클래스 선택기로 제어합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb

CSS 속성
설명
너비
썸네일의 너비입니다.
높이
썸네일의 높이입니다.
테두리
썸네일의 테두리.
배경색
썸네일의 배경색입니다.

터치 디바이스에서 세로 모드로 회전할 때 뷰어는 카탈로그 스프레드를 개별 페이지로 분할하기로 결정하는 경우 구성된 것의 절반까지 썸네일의 크기를 조정할 수 있습니다.

NOTE
썸네일은 state 특성 선택기를 지원하며, 이 선택기를 사용하여 다른 썸네일 상태에 다른 스킨을 적용할 수 있습니다. 특히 state="selected"은(는) 현재 기본 보기에 표시된 이미지의 썸네일에 해당하고, state="default"은(는) 나머지 썸네일에 해당하며, state="over"은(는) 마우스 가리키기에 사용됩니다.

예 - 120 x 85픽셀인 썸네일을 설정하려면 흰색 배경, 밝은 회색 표준 테두리 및 어두운 회색으로 선택한 테두리를 사용합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb {
 width:120px;
 height:85px;
 background-color: rgb(255, 255, 255);
 border: solid 1px #999999;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7thumb[state="selected"]{
 border: solid 2px #666666;
}

썸네일 레이블의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label

CSS 속성
설명
font-family
글꼴 이름.
font-size
글꼴 크기입니다.

예 - 14픽셀 Helvetica® 글꼴을 사용하도록 레이블을 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7label {
 font-family: Helvetica,sans-serif;
 font-size: 12px;
}

보기에 수직으로 맞출 수 있는 것보다 많은 썸네일이 있는 경우 썸네일은 오른쪽에 있는 세로 스크롤 막대를 렌더링합니다. 다음 CSS 클래스 선택기를 사용하여 스크롤 막대 영역의 모양이 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar

CSS 속성
설명
너비
스크롤 막대의 폭입니다.
상위
축소판 영역의 위쪽에서 오프셋된 세로 스크롤 막대입니다.
하단
축소판 영역 아래쪽에서 오프셋된 세로 스크롤 막대입니다.
오른쪽
축소판 영역의 오른쪽 가장자리에서 오프셋된 가로 스크롤 막대입니다.

예 - 썸네일 영역의 위쪽, 오른쪽 및 아래쪽에서 너비가 28픽셀이고 여백이 8픽셀인 스크롤 막대를 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar {
 top:8px;
 bottom:8px;
 right:8px;
 width:28px;
}

스크롤 막대 트랙은 위쪽 및 아래쪽 스크롤 단추 사이의 영역입니다. 이 구성 요소는 트랙의 위치와 높이를 자동으로 설정합니다. 트랙은 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS 속성
설명
너비
스크롤 막대 트랙의 폭입니다.
배경색
스크롤 막대 트랙의 배경색입니다.

예 - 28픽셀 너비이며 반투명 회색 배경이 있는 스크롤 막대 트랙을 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

스크롤 막대 썸네일이 스크롤 트랙 영역 내에서 세로로 이동합니다. 세로 위치는 구성 요소 논리에 의해 완전히 제어되지만 썸네일 높이는 컨텐츠 양에 따라 동적으로 변경되지 않습니다. 썸 높이 및 기타 측면이 다음 CSS 클래스 선택기로 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS 속성
설명
너비
스크롤 막대 썸네일의 너비입니다.
높이
스크롤 막대 썸네일의 높이입니다.
패딩 상단
스크롤 막대 트랙의 위쪽 사이의 수직 패딩입니다.
패딩-하단
스크롤 막대 트랙의 아래쪽 사이의 수직 패딩입니다.
배경 이미지
지정된 썸네일 상태에 대해 표시되는 이미지입니다.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트도 참조하십시오.

NOTE
Thumb은 state 특성 선택기를 지원하며, 이 선택기는 Thumb 상태 up, down, over 및 disabled에 다른 스킨을 적용하는 데 사용할 수 있습니다.

예 - 28 x 45픽셀이고 위쪽과 아래쪽에 10픽셀 여백이 있으며 각 상태에 대해 서로 다른 아트웍을 사용하는 스크롤 막대 썸을 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

상단 및 하단 스크롤 단추의 모양은 다음 CSS 클래스 선택기를 사용하여 제어됩니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

CSS top, left, bottom 및 right 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 대신 뷰어 로직은 뷰어를 자동으로 배치합니다.

CSS 속성
설명
너비
단추의 폭입니다.
높이
단추의 높이입니다.
배경 이미지
지정된 썸네일 상태에 대해 표시되는 이미지입니다.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트도 참조하십시오.

NOTE
이러한 단추는 state 특성 선택기를 지원하며, 이 선택기는 다른 단추 상태 up, down, over 및 disabled에 다른 스킨을 적용하는 데 사용할 수 있습니다.

단추 도구 설명을 현지화할 수 있습니다. 자세한 내용은 사용자 인터페이스 요소의 지역화를 참조하십시오.

예 - 28 x 32픽셀이며 각 상태에 대해 서로 다른 아트웍을 갖는 스크롤 단추를 설정합니다.

.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogsearchviewer .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8