Slide
컨텐츠 영역의 height 가 정해져 있는 경우, 컨텐츠 표현을 위해서 scroll 을 이용하는 경우가 있다. 이러한 컨텐츠를 스크롤이 아닌 좌우 슬라이드로 보여주는 효과이다.
slideContent 라는 block 이 페이지의 단위이고 이 단위 갯수 만큼 페이징이 이루어 진다. 버튼을 이미지로 사용하는 경우 javascript 의 isImageBtn 을 true 로 하시고 이미지를 넣으면 되고 dimmed 된 이미지의 파일명은 _off 를 붙이면 된다. 페이지의 디자인은 CSS 를 수정하면 되고 content 의 폭인 contentWidth (컨텐츠간의 여백포함) 를 같이 조절해 주면 된다.
<div class="gallery-container">
<div class="slideContentContainer">
<div id="gmnextslide" class="slideContentMover">
<div class="slideContent">
<ul>
<li><a href="../images/event/gallery_2008/cadillac_1.jpg"><img src="../images/event/gallery_2008/cadillac_1_thumb.jpg" alt="1918 Royal Cadillac" /></a></li>
<li><a href="../images/event/gallery_2008/cadillac_2.jpg"><img src="../images/event/gallery_2008/cadillac_2_thumb.jpg" alt="1918 Royal Cadillac" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_1.jpg"><img src="../images/event/gallery_2008/winstorm_1_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_2.jpg"><img src="../images/event/gallery_2008/winstorm_2_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_3.jpg"><img src="../images/event/gallery_2008/winstorm_3_thumb.jpg" alt="Winstorm" /></a></li>
</ul>
</div>
<div class="slideContent">
<ul>
<li><a href="../images/event/gallery_2008/winstorm_4.jpg"><img src="../images/event/gallery_2008/winstorm_4_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_5.jpg"><img src="../images/event/gallery_2008/winstorm_5_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_6.jpg"><img src="../images/event/gallery_2008/winstorm_6_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_7.jpg"><img src="../images/event/gallery_2008/winstorm_7_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_8.jpg"><img src="../images/event/gallery_2008/winstorm_8_thumb.jpg" alt="Winstorm" /></a></li>
</ul>
</div>
<div class="slideContent">
<ul>
<li><a href="../images/event/gallery_2008/winstorm_9.jpg"><img src="../images/event/gallery_2008/winstorm_9_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_10.jpg"><img src="../images/event/gallery_2008/winstorm_10_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/winstorm_11.jpg"><img src="../images/event/gallery_2008/winstorm_11_thumb.jpg" alt="Winstorm" /></a></li>
<li><a href="../images/event/gallery_2008/equinox_1.jpg"><img src="../images/event/gallery_2008/equinox_1_thumb.jpg" alt="Equinox" /></a></li>
<li><a href="../images/event/gallery_2008/equinox_2.jpg"><img src="../images/event/gallery_2008/equinox_2_thumb.jpg" alt="Equinox" /></a></li>
</ul>
</div>
<div class="slideContent">
<ul>
<li><a href="../images/event/gallery_2008/equinox_3.jpg"><img src="../images/event/gallery_2008/equinox_3_thumb.jpg" alt="Equinox" /></a></li>
<li><a href="../images/event/gallery_2008/equinox_4.jpg"><img src="../images/event/gallery_2008/equinox_4_thumb.jpg" alt="Equinox" /></a></li>
<li><a href="../images/event/gallery_2008/equinox_5.jpg"><img src="../images/event/gallery_2008/equinox_5_thumb.jpg" alt="Equinox" /></a></li>
<li><a href="../images/event/gallery_2008/equinox_6.jpg"><img src="../images/event/gallery_2008/equinox_6_thumb.jpg" alt="Equinox" /></a></li>
</ul>
</div>
</div>
</div>
<div class="slideBtnSet">
<img id="gmnextprev" class="prevbtn" src="../images/event/seoul_2007_gallery_prev.gif" alt="prev">
<img id="gmnextnext" class="nextbtn" src="../images/event/seoul_2007_gallery_next.gif" alt="next">
</div>
</div>
<script type="text/javascript">initScrollContent(document.getElementById("gmnextslide"), document.getElementById("gmnextprev"), document.getElementById("gmnextnext"));</script>
div.slideContentContainer {
position: absolute;
top: 14px;
left: 32px;
overflow: hidden;
width: 670px;
height: 71px;
}
div.slideContentContainer div.slideContentMover {
position: absolute;
}
div.slideContentContainer div.slideContent {
position: absolute;
width: 685px;
overflow: hidden;
}
div.slideContentContainer div.slideContent ul {
margin: 0;
padding: 0;
list-style: none;
width: 685px;
height: 71px;
}
div.slideContentContainer div.slideContent ul li {
float: left;
padding: 0 5px;
}
div.slideContentContainer div.slideContent li a img {
width: 124px;
/*
height: 71px;
*/
}
div.gallery-container *.on {
cursor: pointer;
}
div.gallery-container *.off {
cursor: default;
}
div.slideBtnSet img.prevbtn {
position: absolute;
top: 43px;
left: 4px;
}
div.slideBtnSet img.nextbtn {
position: absolute;
top: 43px;
right: 4px;
}
function initScrollContent(container, prevBtn, nextBtn) {
var currentContentPage = 1;
var contentElCount = 0;
var content_x = 0;
var slideContentTo = 0;
var contentWidth = 685;
var isImageBtn = true;
var cont = container.getElementsByTagName("div");
for (i=0; i<cont.length; i++) {
if (cont[i].className == "slideContent") {
contentElCount++;
cont[i].style.left = contentWidth * (contentElCount - 1) + "px";
}
}
setSlideBtn();
function setSlideBtn() {
if (contentElCount == 1) {
setPrevBtn("off");
setNextBtn("off");
} else if (parseInt(currentContentPage) == 1) {
setPrevBtn("off");
setNextBtn("on");
} else if (parseInt(currentContentPage) == contentElCount) {
setPrevBtn("on");
setNextBtn("off");
} else {
setPrevBtn("on");
setNextBtn("on");
}
}
function setPrevBtn(condition) {
if (condition == "on") {
prevBtn.onclick = viewPrev;
if (isImageBtn) prevBtn.src = prevBtn.src.replace("_off.gif", ".gif");
prevBtn.className = prevBtn.className.replace(" off", "");
prevBtn.className += " on";
} else {
prevBtn.onclick = "";
if (isImageBtn) prevBtn.src = prevBtn.src.replace(".gif", "_off.gif");
prevBtn.className = prevBtn.className.replace(" on", "");
prevBtn.className += " off";
}
}
function setNextBtn(condition) {
if (condition == "on") {
nextBtn.onclick = viewNext;
if (isImageBtn) nextBtn.src = nextBtn.src.replace("_off.gif", ".gif");
nextBtn.className = nextBtn.className.replace(" off", "");
nextBtn.className += " on";
} else {
nextBtn.onclick = "";
if (isImageBtn) nextBtn.src = nextBtn.src.replace(".gif", "_off.gif");
nextBtn.className = nextBtn.className.replace(" on", "");
nextBtn.className += " off";
}
}
function viewPrev() {
slideContentTo += contentWidth;
currentContentPage = parseInt(currentContentPage) - 1;
setSlideBtn();
startScroll();
}
function viewNext() {
slideContentTo -= contentWidth;
currentContentPage = parseInt(currentContentPage) + 1;
setSlideBtn();
startScroll();
}
function startScroll() {
setTimeout(
function slideContent() {
if (Math.abs(content_x - slideContentTo) > 1) {
content_x += (slideContentTo - content_x) * .15;
container.style.left = content_x + "px";
startScroll();
} else {
content_x = slideContentTo;
container.style.left = content_x + "px";
}
}
, 10);
}
}