갤러리 배열
이번 예제는 jquery로 이미지를 제어하는 방법을 담은 예제입니다. 예제의 조건은 다음과 같습니다.
-
이미지들을 100*100 px의 크기로 x간격, y간격으로 배열한다
-
x간격, y간격, 1줄의 이미지 갯수를 input태그로 받아서 버튼을 누르면 그대로 나타나게 한다.
-
키보드의 +버튼과 -버튼을 누르면 이미지가 추가되었다가 제거되었다가 하게 한다.
아래는 예제를 완성시킨 모습입니다.
이 예제의 코드
<![CDATA[
<h1>갤러리 배열</h1>
<h3>+버튼으로 이미지 추가, -버튼으로 이미지 제거</h3>
x간격:<input type="text" id="xval" value="10"><br />
y간격:<input type="text" id="yval" value="10"><br />
1줄에 이미지 갯수:<input type="number" id="colnum" value="5"><br />
<input type="button" value="배열" id="btnStart" name="name"><br />
<div id="box">
</div>
<script type="text/javascript">
$(document).ready(function(){
for(var i=0;i<Math.random()*10;i++){
randomImg2();
}
init();
sta6rt();
})
function sta6rt(){
init();
var x = Number(xval.value);
var y = Number(yval.value);
var col = colnum.value;
if(col>$("img.galler").length){col=$("img.galler").length;}
var row = parseInt(($("img.galler").length-1)/col)+1;
alignImg(x,y,col);
resizeSolidBox(col*(100+x)+x,row*(100+y)+y)
}
function init(){
for (var i = 0; i < $("img.galler").length; i++) {
$("img.galler").eq(i).attr({
style:"position:absolute",
width:100,
height:100
})
}
}
function alignImg(x,y,col){
$images = $("img.galler")
for (var i = 0; i < $images.length; i++) {
var x1 = x+$("#box").offset().left+((i%col)*(100+x));
var y1 = y+$("#box").offset().top+(parseInt(i/col)*(100+y));
$images.eq(i).css({
left:x1,
top:y1
})
}
}
function resizeSolidBox(x,y){
$("#box").css({
width: x,
height: y
})
}
function randomImg2(){
function ifmoon(x,y,z){
if(x<y && y<x+1){$("#box").append(z);}
}
var i = Math.random()*5
ifmoon(0,i,'<img id="effectImage" src="http://i1.daumcdn.net/cfs.tistory/resource/1949/blog/plugins/lightbox/images/zzoop.gif" class="galler" style="">');
ifmoon(1,i,'<img src="https://t1.daumcdn.net/cfile/tistory/261CDE41569EC93101" style="" class="galler" width="410" height="410">');
ifmoon(2,i,'<img src="https://t1.daumcdn.net/cfile/tistory/212B8834569EC93913" style="" class="galler" width="1000" height="666">');
ifmoon(3,i,'<img src="https://t1.daumcdn.net/cfile/tistory/2179014E569EC93C2E" style="" class="galler" width="1000" height="543">');
ifmoon(4,i,'<img src="https://t1.daumcdn.net/cfile/tistory/2714794F5303740F17" alt="" class="galler">');
}
$("#btnStart").click(function(){
sta6rt();
})
function enter3(){
if(event.keyCode == 13){
sta6rt();
}else if(event.keyCode == 107||event.keyCode == 187){
randomImg2();
init();
sta6rt();
}else if(event.keyCode == 109||event.keyCode == 189){
$("img.galler").eq($("img.galler").length-1).detach();
init();
sta6rt();
}
}
</script>
]]>
