제이쿼리 .attr()를 이용해 이미지변경 및 갤러리 만들기

사이트에서 사진들이 모여 있는 갤러리를 보면 작은 썸네일을 클릭하면 큰이미지가 변경되는 형식이 종종 보인다. 

모달창은 아닌데.. 이거 이름을 뭐라고 하는지 모르겠다.

무튼 그걸 만들어보려고 한다!

우선 완성샷입니다. 

작은 썸네일을 눌러보세용.

작은 썸네일을 클릭하면 확대된 이미지가 변경됩니다. 

이 갤러리는 제이쿼리 메서드는 '.attr()' 를 이용해서 만들었어요.

 

메서드 .attr()에 대해 간략하게 설명하자면! 

attr 는 attribute의 약자로 속성을 제어할때 사용합니다. 

쓰는 방법

-  .attr(attributeName) -속성이름 : 속성값을 얻는다. 

-  .attr(attributeName,value) -속성이름, 속성값 : 속성값을 변경한다. 

-  .attr(attributeName,function(index,attr)) -속성이름, 함수 : 속성값을 함수를 이용해 변경한다.

그럼 우선 html부터 짜볼게요. 

HTML

<div>
    <ul class="small_thumb">
        <li><img src="http://mmctxt.iwinv.net/03_data_dh/images/IMG_03.JPG" alt="개나리사진01"></li>
        <li><img src="http://mmctxt.iwinv.net/03_data_dh/images/IMG_04.JPG" alt="벚꽃사진"></li>
        <li><img src="http://mmctxt.iwinv.net/03_data_dh/images/IMG_05.JPG" alt="개나리사진02"></li>
    </ul>
    <div class="big_pic">
    </div>
    </div>

ul(.small_thumb)를 이용해서 작은 썸네일을 묶어주고, 큰 이미지가 나올 div(.big_pic)를 따로 만들었어요. 

CSS

        div.small_thumb{width: 330px;overflow: hidden}
        div.small_thumb>div{width: 100px;float: left;margin: 5px;cursor: pointer}
        div.small_thumb>div>img{width: 100%;}
        div.big_pic{margin: 5px;width:320px;}
        div.big_pic>img{width: 100%}
 

css를 이용해서 사이즈를 맞췄어요.

큰이미지,작은이미지를 동일한 이미지로 사용할 예정이라 일부러 큰이미지를 사용해 사이즈를 css를 이용해 조정했어요.

이미지 사이즈를 미리 맞췄더라면 불필요 했을 부분도 있을것 같아요.  

JQUERY

        $(function(){
        $('.small_thumb>div>img').on({
            "click" : function(){
                var imgSrc = $(this).attr('src');
                
                $('.big_pic>img').attr('src',imgSrc);
            }
        });          
            });

설명하자면

$('.small_thumb>div>img').on({ 

 "click" : function(){ ->썸네일이미지를 클릭했을때 

var imgSrc = $(this).attr('src'); ->변수 imgSrc 에 클릭한 이미지의 속성 src의 값을 담은 후 

$('.big_pic>img').attr('src',imgSrc);->큰이미지에 속성 src를 imgSrc로 변경합니다.

요렇게 간단합니당.

끝

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