이미지 갤러리
화살표 버튼을 클릭하면, 그림모임페이지가 이동.
thum이미지 클릭시 오른쪽에 크게 표시
작업개요
1. 레아웃구조와 각 id/cass 명 확인
2. 각섬네일 이미지에 보여질 큰이미지의 경로를 a 테그를 이용하여 링크설정 .
3. 각 a 테그를 클릭하면 a 테그의 경로를 얻어내어 메인이미지 앞에 넣어주고 기존에 이미지는 사라지게 한다.
주의) a테그를 클릭해서 스크립트를 실행시킨다음 a 테그자제의 링크가 동작안되도록 return false 설정
4. next 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 -300px (pageWrap 전체의 가로) 으로 animate 를 적용.
5. prev 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 +300px (pageWrap 전체의 가로) 으로 animate 를 적용.
-index(): 해당태그의 순번을 출력함.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>imgGallery</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
body{
background:black;
}
#container{
width:1000px;
margin:100px auto;
}
#navi{
width:300px;
float:left;
}
#navi ul{
height:460px;
}
#navi li{
list-style-type:none;
width:150px;
float:left;
}
#navi li img{
border:3px solid white;
}
#navi{
overflow:hidden;
position:relative;
left:0px;
top:0px;
}
#navi .pageWrap{
width:900px; position:relative; left:0px; top:0px;
}
#navi .pageWrap .page{
width:300px;
float:left;
}
#navi p{
clear:both;
width:300px;
padding:10px 0;
text-align:center;
}
#navi p img{
cursor:pointer;
}
#main{
width:650px;
float:right;
}
#main img{
position:absolute;
border:3px solid white;
}
</style>
<script type="text/javascript">
/*
작업개요
1. 레아웃구조와 각 id/cass 명 확인
2. 각섬네일 이미지에 보여질 큰이미지의 경로를 a 테그를 이용하여 링크설정 .
3. 각 a 테그를 클릭하면 a 테그의 경로를 얻어내어 메인이미지 앞에 넣어주고 기존에 이미지는
사라지게 한다.
주의) a테그를 클릭해서 스크립트를 실행시킨다음 a 테그자제의 링크가 동작안되도록 return false 설정
4. next 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 -300px (pageWrap 전체의 가로) 으로 animate 를 적용.
5. prev 버튼을 클릭하면 pageWrap 의 현제 margin 값을 얻어내어 +300px (pageWrap 전체의 가로) 으로 animate 를 적용.
*/
var $sumImg; // 클릭된 이미지
var $mainWrap; // 클릭된 이미지가 보이는 화면
var $newImg; // 새로운 이미지
var clickNum; // 클릭한 이미지의 번호
var pageWidth; // 페이지 1장의 너비
var $pageWrap; // 이미지들을 담고 있는 페이지들을 감싸고 있는 것
var currentPosition; // 현재의 좌표
var endX; // 마지노선
$(document).ready(function(){
$sumImg = $(".page li");
$mainWrap = $("#main");
$sumImg.bind("click", onClick);
$pageWrap = $(".pageWrap"); // 페이지 감싸지는 부분
// 페이지가 보이는 화면의 내부 너비: margin, padding, border 0이므로 outter 나 inner든 width 같음
pageWidth = $("#navi").innerWidth();
endX=-(pageWidth*$(".page").size()-pageWidth); // 마지노선
$(".prev").bind("click", onPrev); // 이전버튼에 이벤트 달기: 페이지가 이동함.
$(".next").bind("click", onNext); // 다음버튼에 이벤트 달기: 페이지가 이동함.
});
function onClick(){
// 이미지들의 이름이 통일 되어있기때문에, 이미지 개수
clickNum = $sumImg.index($(this)) + 1; // index()함수: 해당 순번을 알아내는 함수
//alert(clickNum);
$newImg = $("<img src='images/photo" + clickNum + ".jpg' />");
$newImg.appendTo($mainWrap); // 메인창 뒤에 붙이기
$mainWrap.children().eq(0).animate({"opacity":0}, 200, "easeOutExpo",function(){
$(this).remove(); // 기존 것 지워주기
});
return false; // a 링크되는 것 막아주기
}
function onPrev(){
currentPosition = $pageWrap.position().left;
//alert(currentPosition);
$pageWrap.animate({"left":currentPosition + pageWidth});
}
function onNext(){
currentPosition = $pageWrap.position().left;
//alert(currentPosition);
$pageWrap.animate({"left":currentPosition - pageWidth});
}
</script>
</head>
<body>
<div id="container">
<div id="navi">
<p><img src="images/btn_prev.jpg" alt="뒤로" class="prev" /> <img src="images/btn_next.jpg" alt="앞으로" class="next" /></p>
<div class="pageWrap">
<div class="page">
<ul>
<li><img src="images/photo1_thum.jpg" alt="" /></li>
<li><img src="images/photo2_thum.jpg" alt="" /></li>
<li><a href="images/photo3.jpg"><img src="images/photo3_thum.jpg" alt="" /></a></li>
<li><a href="images/photo4.jpg"><img src="images/photo4_thum.jpg" alt="" /></a></li>
<li><a href="images/photo5.jpg"><img src="images/photo5_thum.jpg" alt="" /></a></li>
<li><a href="images/photo6.jpg"><img src="images/photo6_thum.jpg" alt="" /></a></li>
<li><a href="images/photo7.jpg"><img src="images/photo7_thum.jpg" alt="" /></a></li>
<li><a href="images/photo8.jpg"><img src="images/photo8_thum.jpg" alt="" /></a></li>
</ul>
<p><img src="images/btn_next.jpg" alt="" class="next" /></p>
</div>
<div class="page">
<ul>
<li><a href="images/photo9.jpg"><img src="images/photo9_thum.jpg" alt="" /></a></li>
<li><a href="images/photo10.jpg"><img src="images/photo10_thum.jpg" alt="" /></a></li>
<li><a href="images/photo11.jpg"><img src="images/photo11_thum.jpg" alt="" /></a></li>
<li><a href="images/photo12.jpg"><img src="images/photo12_thum.jpg" alt="" /></a></li>
<li><a href="images/photo13.jpg"><img src="images/photo13_thum.jpg" alt="" /></a></li>
<li><a href="images/photo14.jpg"><img src="images/photo14_thum.jpg" alt="" /></a></li>
<li><a href="images/photo15.jpg"><img src="images/photo15_thum.jpg" alt="" /></a></li>
<li><a href="images/photo16.jpg"><img src="images/photo16_thum.jpg" alt="" /></a></li>
</ul>
</div>
<div class="page">
<ul>
<li><a href="images/photo17.jpg"><img src="images/photo17_thum.jpg" alt="" /></a></li>
<li><a href="images/photo18.jpg"><img src="images/photo18_thum.jpg" alt="" /></a></li>
<li><a href="images/photo19.jpg"><img src="images/photo19_thum.jpg" alt="" /></a></li>
</ul>
<p><img src="images/btn_prev.jpg" alt="뒤로" class="prev" /></p>
</div>
</div>
</div>
<div id="main">
<img src="images/photo1.jpg" alt="" />
</div>
</div>
</body>
</html>
슬라이드 이미지 갤러리
왼쪽, 오른쪽 버튼을 누르면 4장이 1개의 슬라이드를 구성하는 슬라이드들이 움직인다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sumimg_Slide</title>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../libs/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var $slideInner; // inner들을 나타내는 변수
var slideWidth; // 슬라이드 너비
var currentPosition; // 슬라이드 현재 위치
$(document).ready(function(){
$slideInner = $("#slideInner");
slideWidth = $("#slide").innerWidth();
//alert(slideWidth);
// 초반 세팅1
// slideInner의 너비를 column의 개수만큼의 너비로 늘려주기: .column의 개수만큼 너비를 곱해줌.
$slideInner.css("width", slideWidth * $(".column").size() );
// 초반 세팅2
// 맨마지막에 있는 이미지를 맨 앞으로 이동시키기
$slideInner.children().last().prependTo($slideInner);
// 초반 세팅3
// 맨 마지막 column을 앞으로 이동시켰기에, 1번째 column이 옆으로 이동시켜져있으므로, left속성을 이용해서 원상복귀하기
$slideInner.css("left", -slideWidth);
$("#slideNext").bind("click", onNext);
$("#slidePrev").bind("click", onPrev);
//alert(0);
});
function onNext(){
//alert(1);
currentPosition = $slideInner.position().left;
//
// $("#slideInner:not(:animated)") 을 통해서 중복 클릭 막음
$("#slideInner:not(:animated)").animate({"left":currentPosition-slideWidth}, function(){
// 맨 첫 column을 slideInner의 맨 뒤로 붙이기
$slideInner.children().first().appendTo($slideInner);
$slideInner.css("left", -slideWidth);
});
}
function onPrev(){
//alert(2);
currentPosition = $slideInner.position().left;
// $("#slideInner:not(:animated)") 을 통해서 중복 클릭 막음
$("#slideInner:not(:animated)").animate({"left":currentPosition+slideWidth}, function(){
// 맨 마지막 column을 slideInner의 맨 앞으로 붙이기
$slideInner.children().last().prependTo($slideInner);
// 맨뒤에 붙음으로써, left속성을 다시 초기위치로 바꿔주어야함.
$slideInner.css("left", -slideWidth);
});
}
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#slideInner{
position:relative;
left:0px;
top:0px;
}
#slideWrap{
margin:100px auto;
width:620px;
height:135px;
padding:5px;
background:url("./images/background.gif");
position:relative;
}
#slidePrev{
position:absolute;
top:65px;
left:-8px;
cursor:pointer;
z-index:10;
}
#slideNext{
position:absolute;
top:65px;
right:-8px;
cursor:pointer;
z-index:10;
}
#slide{
width:100%;
height:100%;
}
#slideInner ul.column{
width:605px;
height:105px;
padding:15px 0 15px 15px;
list-style-type:none;
float:left;
}
#slideInner ul.column li{
float:left;
margin-right:10px;
display:inline;
}
#slideInner ul.column li img{
border:none;
}
</style>
</head>
<body>
<div id="slideWrap">
<p id="slidePrev"><img src="./images/btn_prev.gif" alt="앞으로" /></p>
<p id="slideNext"><img src="./images/btn_next.gif" alt="뒤로" /></p>
<div id="slide">
<div id="slideInner">
<ul class="column">
<li><a href="#"><img src="./images/photo1_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo2_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo3_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo7_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo8_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo9_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo10_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo11_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo12_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo13_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo14_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo15_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo16_thum.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>