제이쿼리 슬라이더 질문입니다!
본문
위 주소를 참고로 슬라이더를 만들어보려고하는데요..
이 슬라이더에 사진이름하고 번호를 추가할 수 없을까요?ㅠㅠ
예를들면.. 이렇게욤.. ㅠㅠ 아시는 분 조언 주시면 정말 감사하겠습니다!!ㅠㅠ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 제이쿼리를 이용한 이미지 슬라이드 </title>
<style type="text/css">
body {padding:0px; margin:0px; line-height:1}
.photo_gallery {position:relative; width:700px; padding:20px 4px; background:#454545}
.photo_gallery p.photo_img {width:596px; height:447px; border:2px solid #CFC1C0; margin:0px auto 20px auto}
.photo_gallery p.photo_img img {width:596px; height:447px}
.photo_gallery .photo_list {width:600px; overflow:hidden; margin-left:49px}
.photo_gallery .photo_list .list_wrap ul {width:600px; list-style:none; padding:0px; margin:0px; float:left}
.photo_gallery .photo_list .list_wrap ul li {float:left; width:140px; line-height:0; padding:0px 5px}
.photo_gallery .photo_list .list_wrap ul li a img {width:136px; height:102px; vertical-align:middle; border:2px solid #CFC1C0}
.photo_gallery .photo_list .list_wrap ul li.active a img {border:2px solid #DE3838}
.photo_gallery button {position:absolute; bottom:59px; cursor:pointer}
.photo_gallery button.btn_prev {left:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_prev.png) no-repeat left top}
.photo_gallery button.btn_next {right:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_next.png) no-repeat left top}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
//Slide Gallery 이미지 샐랙터
jQuery(".list_wrap ul li").click(function() {
jQuery(this).addClass("active").siblings().removeClass();
jQuery(".photo_img img").attr("src",jQuery(this).children("a").attr("href"));
return false;
});
//Slide Gallery 슬라이딩 초기화
jQuery(".list_wrap").width("600"*parseInt(jQuery(".list_wrap ul").size())+"px");
jQuery(".list_wrap ul:last").prependTo(".list_wrap");
jQuery(".list_wrap").css("margin-left","-600px");
//Silde Gallery의 prev버튼
jQuery("button.btn_prev").click(function() {
jQuery(".list_wrap").animate({
marginLeft:"+=600px"
},"swing",function() {
jQuery(".list_wrap ul:last").prependTo(".list_wrap");
jQuery(".list_wrap").css("margin-left","-600px");
jQuery(".list_wrap ul li").removeClass();
});
});
//Silde Gallery의 next버튼
jQuery("button.btn_next").click(function() {
jQuery(".list_wrap").animate({
marginLeft:"-=600px"
},"swing",function() {
jQuery(".list_wrap ul:first").appendTo(".list_wrap");
jQuery(".list_wrap").css("margin-left","-600px");
jQuery(".list_wrap ul li").removeClass();
});
});
});
</script>
</head>
<body>
<div class="photo_gallery">
<p class="photo_img">
<img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷" />
</p>
<button class="btn_prev">prev</button>
<button class="btn_next">next</button>
<div class="photo_list">
<div class="list_wrap">
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg" alt="스크린샷" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg" alt="스크린샷" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg" alt="스크린샷" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg" alt="스크린샷" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" alt="스크린샷" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" alt="스크린샷" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
답변 3
답변감사합니다!!! 이렇게 하면 될 것 같은데.. ㅠㅠ
이게 사진이 네장만 있으면 안나오더라고요... 이건 방법이 없을까요??
어... 최대한 그 슬라이드 변경안하고 추가만해서 했는데 이게 엄청 야매로 한거라...맘에 안드실꺼같아영...
요런느낌인데 괜찮으시면 알려드릴께영...... 이게 대신.. 자동으로 그러는건아니고 사진이 추가될때 수작업을 진행해야되서...크흠;;;
추가한 부분에 주석달아놨어요
보시고 하시면되용
이미지를 추가할경우 기존 소스가 4개씩 ul li 로 되어있으니까
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" alt="스크린샷21" class="21"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" alt="스크린샷22" class="22"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" alt="스크린샷23" class="23"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" alt="스크린샷24" class="24"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" /></a></li>
</ul>
이렇게 추가하시면되요
아래는 소스에요~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 제이쿼리를 이용한 이미지 슬라이드 </title>
<style type="text/css">
body {padding:0px; margin:0px; line-height:1}
.photo_gallery {position:relative; width:700px; padding:20px 4px; background:#454545}
.photo_gallery p.photo_img {width:596px; height:447px; border:2px solid #CFC1C0; margin:0px auto 20px auto}
.photo_gallery p.photo_img img {width:596px; height:447px}
.photo_gallery .photo_list {width:600px; overflow:hidden; margin-left:49px}
.photo_gallery .photo_list .list_wrap ul {width:600px; list-style:none; padding:0px; margin:0px; float:left}
.photo_gallery .photo_list .list_wrap ul li {float:left; width:140px; line-height:0; padding:0px 5px}
.photo_gallery .photo_list .list_wrap ul li a img {width:136px; height:102px; vertical-align:middle; border:2px solid #CFC1C0}
.photo_gallery .photo_list .list_wrap ul li.active a img {border:2px solid #DE3838}
.photo_gallery button {position:absolute; bottom:59px; cursor:pointer}
.photo_gallery button.btn_prev {left:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_prev.png) no-repeat left top}
.photo_gallery button.btn_next {right:25px; text-indent:-9999px; overflow:hidden; display:block; width:24px; height:24px; margin:0px; border:0px; padding:0px; background:url(http://everstory.co.kr/images/btn_next.png) no-repeat left top}
.photo_text { width: 599px; height: 50px; border: 0px solid #CFC1C0; margin: 0px auto; position:absolute; margin-top: -70px; margin-left: 50px; background:#ececec; opacity:0.9 }
.photo_text p.leftP { float:left; margin-left:30px; }
.photo_text p.rightP { float:right; margin-right:30px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var alt = jQuery(".photo_img img").attr('alt'); //처음 로딩시 img 의 alt 값 변수에 담기
jQuery('.leftP').text(alt); //위의 변수값을 leftP의 text값으로 변경
var allcnt = jQuery('.list_wrap ul li').find('img').length; //처음 로딩할떄 list_wrap ul li img 의 전체 갯수를 구해서 변수에 담기
jQuery('.allC').text(allcnt); //전체 갯수를 담은 변수를 allC의 text값으로 변경
var nowcnt =jQuery(".photo_img img").attr('class'); //alt 값 뽑아오는것과 같이 처음 로딩시 class의 값을 뽑아서 변수에 담기
jQuery('.nowC').text(nowcnt); //위의 class 변수값을 담은 것을 nowC의 text값으로 변경
//Slide Gallery 이미지 샐랙터
jQuery(".list_wrap ul li").click(function() {
var alt2 = jQuery(this).children("a").attr("alt"); //현재 선택된 a의 alt 값을 변수에 담는다.
var incnt = jQuery(this).children("a").attr("class"); //현재 선택된 a의 class 값을 변수에 담는다.
jQuery(this).addClass("active").siblings().removeClass();
jQuery(".photo_img img").attr("src",jQuery(this).children("a").attr("href"));
jQuery(".photo_img img").attr("alt",jQuery(this).children("a").attr("alt"));
jQuery('.leftP').text(alt2); //선택된 a의 alt 값을 변수에 담아서 leftP의 text값으로 변경
jQuery('.nowC').text(incnt); //선택된 a의 class 값을 변수에 담아서 nowC의 text값으로 변경
return false;
});
//Slide Gallery 슬라이딩 초기화
jQuery(".list_wrap").width("600"*parseInt(jQuery(".list_wrap ul").size())+"px");
jQuery(".list_wrap ul:last").prependTo(".list_wrap");
jQuery(".list_wrap").css("margin-left","-600px");
//Silde Gallery의 prev버튼
jQuery("button.btn_prev").click(function() {
jQuery(".list_wrap").animate({
marginLeft:"+=600px"
},"swing",function() {
jQuery(".list_wrap ul:last").prependTo(".list_wrap");
jQuery(".list_wrap").css("margin-left","-600px");
jQuery(".list_wrap ul li").removeClass();
});
});
//Silde Gallery의 next버튼
jQuery("button.btn_next").click(function() {
jQuery(".list_wrap").animate({
marginLeft:"-=600px"
},"swing",function() {
jQuery(".list_wrap ul:first").appendTo(".list_wrap");
jQuery(".list_wrap").css("margin-left","-600px");
jQuery(".list_wrap ul li").removeClass();
});
});
});
</script>
</head>
<body>
<div class="photo_gallery">
<p class="photo_img">
<img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷1" class="1" />
</p>
<div class="photo_text">
<p class="leftP">블라블라</p>
<!--<div class="rightP">(<p class="rightN1">0</p>/<p class="rightN2">10</p>)</div>-->
<p class="rightP">(<span class="nowC">현재</span>/<span class="allC">갯수</span>)</p>
</div>
<button class="btn_prev">prev</button>
<button class="btn_next">next</button>
<div class="photo_list">
<div class="list_wrap">
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" alt="스크린샷1" class="1"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch1.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg" alt="스크린샷2" class="2"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/lunch2.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg" alt="스크린샷3" class="3"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/laptab.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg" alt="스크린샷4" class="4"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/my_table.jpg" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg" alt="스크린샷5" class="5"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/hiweb2.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg" alt="스크린샷6" class="6"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong1.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg" alt="스크린샷7" class="7"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong2.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg" alt="스크린샷8" class="8"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/07/changdong5.jpg" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png" alt="스크린샷9" class="9"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/editer_sc.png" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg" alt="스크린샷10" class="10"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo1.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg" alt="스크린샷11" class="11"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo3.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg" alt="스크린샷12" class="12"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/nagasoo2.jpg" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg" alt="스크린샷13" class="13"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work1.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg" alt="스크린샷14" class="14"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/work4.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg" alt="스크린샷15" class="15"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard2.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg" alt="스크린샷16" class="16"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard3.jpg" /></a></li>
</ul>
<ul>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" alt="스크린샷17" class="17"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/keyboard4.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" alt="스크린샷18" class="18"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot1.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" alt="스크린샷19" class="19"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot2.jpg" /></a></li>
<li><a href="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" alt="스크린샷20" class="20"><img src="http://everstory.co.kr/wp/wp-content/uploads/2011/08/hansot3.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
