Snippet 본문

summary형 이미지 뷰어(썸네일 사이즈 유동)

등록
박민지 (등록일 : 2011/08/29    최종수정일 : 2013/03/08)
Type
PC
설명
. summary 형식의 이미지 리스트 . 큰 이미지를 볼 수 있는 형태의 뷰어 제공 . 이미지 리스트의 이미지 크기가 유동적이며 가로/세로 중앙정렬 . 이전/다음 슬라이딩 제공
미리보기
Html
<div class="view_comm">
	<div class="photo_bit">
		<strong class="screen_out">사진목록</strong>
		<div class="slide_photo">
			<ul class="list_photo" style="left:0%"> <!-- 슬라이딩 되는 이미지 리스트의 위치값 : left:~% 변경 -->
				<li class="on"> <!-- 선택된 항목 : on 클래스 추가 -->
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="64" height="51" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="50" height="30" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="20" height="51" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="40" height="40" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="64" height="51" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="50" height="51" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="30" height="30" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="64" height="51" class="thumb_img" alt="이미지정보"></a>
				</li>
				<li>
					<a href="#none" class="link_thumb"><img src="/snippet/image?idx=163" width="64" height="51" class="thumb_img" alt="이미지정보"></a>
				</li>
			</ul>
		</div>
		<a href="#none" class="img_sample btn_prev">이전 이미지 목록 보기</a>
		<a href="#none" class="img_sample btn_next">다음 이미지 목록 보기</a>
	</div>
	<div class="photo_detail">
		<strong class="screen_out">선택된 확대사진</strong>
		<div class="view_photo">
			<div class="thumb_photo">
				<img width="528" height="411" src="/snippet/image?idx=163" alt="이미지정보">
			</div>
			<div class="view_info">
				<p class="txt_desc">이미지에 따른 설명글입니다~</p>
				<span class="info_append"><a href="#none" class="link_user">글쓴이</a><span class="txt_bar"> | </span><span class="txt_inquiry">조회</span> <span class="txt_num">352</span><span class="txt_bar"> | </span><span class="txt_num">10.10.25</span></span>
			</div>
		</div>
		<a href="#none" class="btn_move btn_prev"><span class="img_sample">이전 이미지 보기</span></a>
		<a href="#none" class="btn_move btn_next"><span class="img_sample">다음 이미지 보기</span></a>
	</div>
</div>
CSS
.img_sample {background:url(/snippet/image?idx=2) no-repeat}

.view_comm {width:692px;border:1px solid #ddd;background-color:#fafafa}
.photo_bit {overflow:hidden;position:relative;width:100%;height:83px;border-bottom:1px solid #ededed}
.photo_bit .slide_photo {overflow:hidden;position:relative;width:616px;height:59px;margin-left:38px;padding:12px 0}
.photo_bit .list_photo {position:absolute;top:12px;width:3000px;height:59px}
.photo_bit .list_photo li {display:table-cell;width:70px;height:59px;padding-right:8px;text-align:center;line-height:59px;vertical-align:middle;*display:inline;zoom:1;*font-size:59px}
.photo_bit .list_photo .link_thumb {line-height:59px;vertical-align:middle}
.photo_bit .list_photo .thumb_img {vertical-align:middle;font-size:59px;line-height:59px}
.photo_bit .list_photo .on .thumb_img {border:3px solid #bc4318}
.photo_bit .img_sample {display:block;overflow:hidden;position:absolute;top:12px;width:16px;height:59px;text-indent:-9999px;cursor:pointer}
.photo_bit .btn_prev {left:14px;background-position:-100px -60px}
.photo_bit .btn_prev:hover {background-position:0 -60px}
.photo_bit .btn_next {right:14px;background-position:-150px -60px}
.photo_bit .btn_next:hover {background-position:-50px -60px}

.photo_detail {position:relative;width:692px;padding:29px 0;border-top:1px solid #fff}
.photo_detail .view_photo {overflow:hidden;width:528px;padding:0 82px}
.photo_detail .thumb_photo {width:100%;text-align:center;vertical-align:middle}
.photo_detail .btn_move {display:block;position:absolute;top:28px;width:58px;height:211px;padding:200px 0 0 24px}
.photo_detail .btn_prev {left:0}
.photo_detail .btn_next {right:0}
.photo_detail .img_sample {display:block;overflow:hidden;width:25px;height:49px;text-indent:-9999px;cursor:pointer}
.photo_detail .btn_prev .img_sample {background-position:0 0}
.photo_detail .btn_prev:hover .img_sample {background-position:-40px 0}
.photo_detail .btn_next .img_sample {background-position:-80px 0}
.photo_detail .btn_next:hover .img_sample {background-position:-120px 0}

.view_info {width:100%;margin-top:15px}
.view_info .txt_desc {line-height:19px}
.view_info .info_append {display:block;margin-top:4px;font-size:11px;color:#999}
.view_info .link_user {color:#333}
.view_info .txt_bar {color:#dedede}
.view_info .txt_num {font-family:tahoma,sans-serif}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기