Snippet 본문

summary형 이미지 뷰어 (썸네일 사이즈 고정)

등록
박민지 (등록일 : 2011/08/29    최종수정일 : 2014/07/22)
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="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</a>
				</li>
				<li>
					<a href="#none" class="link_thumb">
						<img src="/snippet/image?idx=163"  width="70" height="59" alt="이미지정보">
						<span class="frame_g"></span>
					</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}
.photo_bit .list_photo li {float:left;position:relative;width:70px;margin-right:8px}
.photo_bit .link_thumb {display:block}
.photo_bit .frame_g {position:absolute;top:0;left:0;width:68px;height:57px;border:1px solid #000;opacity:0.12;filter:alpha(opacity:12)}
.photo_bit .on .frame_g {width:62px;height:51px;border:4px solid #bc4318;opacity:1;filter:alpha(opacity:100)}
.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 ] 바로가기