제이쿼리로 이미지 불러오기

오랜만에 제이쿼리를 다시 연습해보았어요.

사실 오랜만에 하려니까 엄두가 안나서 간단한 것부터 해보려고 해요.

그래서 해본 '제이쿼리로 이미지 가져오기'

이럴때 활용할 수 있을것 같음

1. 이미지가 많은데 하나씩 html에 적지 않고 제이쿼리로 불러오고 싶을때

2. 이미지들이 네임이 넘버링을 구분이 되어있을때 (ex. picture01, picture02.... )

 

먼저 완성된 모습

(작년에 벗꽃 구경가서 찍은 사진들히히)

이미지가 더 많으면 밑으로 쭉나올거예요. *중요한건 이미지의 이름이 넘버링으로 구분할것 (ex. picture01, picture02.... )

그럼 html 부터 적어봅니당.

HTML

<div class="all_wrap"></div>

무진장 심플함

CSS

.alll_wrap{margin: 0 auto;}
.alll_wrap img{margin: 3px;width: 200px;}

전체 레이아웃을 가운데 정렬하고 크기를 미리 지정해줬어요. 

JQUERY

function zeroFill(number, lenght){     //number : 숫자 lenght:자릿수
var output = number.toString();   //숫자를 문자로 변환합니다.
while(output.length < lenght ){   //숫자의 길이가 전체 자리수보다 작으면
output = '0'+output;               //숫자앞에 '0'을 붙여줍니다.
return output;
}

for(var i=1; i<=5; i++){
$('.wrap').append('<img src="image/IMG_' + zeroFill(i, 2) + '.JPG">');
}

먼저 앞에 제로가 붙은 숫자들(01,02,03,04...)을 계속해서 만들수 있는 함수를 만들었어요. 

그리고 제대로 썼나 대입을 한번 해봅니당.

- zeroFill(1,2)일 경우

 

function zeroFill(1, 2){

                var output = number.toString();   //  1

                while(output.length < lenght ){    // 1<2

                   output = '0'+output;  //01

                }return output;  01

            }

한번 더 넣어봄

- zeroFill(2,2)일 경우

function zeroFill(2, 2){

                var output = number.toString();   //  2

                while(output.length < lenght ){    // 1<2

                   output = '0'+output;  //02

                }return output;  //02

            }

음 맞는군

그리고 먼저 만든 div 안에 이미지가 반복적으로 들어가도록 for반복문을 사용합니다.

이미지가 5개밖에 없어서 5번 반복되도록 했어요.

이렇게 완성. 

이미지가 엄청 많을땐 굉장히 유용할듯 합니당.

**열심히 적었으나 오류가 있을 수 있으니 너무 신뢰하지 마세요:) ㅎㅎ