HTML, CSS, JavaScript, jQuery : 이미지 갤러리 페이지 구축 : 구현, 예제

HTML, CSS, JavaScript, jQuery : 이미지 갤러리 페이지 구축 : 구현, 예제

 

웹 페이지에 이미지 갤러리를 표시하는 것은 jQuery 모달 상자와 마찬가지로 매우 복잡 할 수 있습니다. 오늘날 CSS와 jQuery에서 멋진 이미지 갤러리를 만드는 매우 간단한 방법에 대해 알아보겠습니다.

갤러리에는 기본 이미지와 여러 개의 대체 이미지가 있으며, 호버 이벤트시 기본 이미지가 변경됩니다. CSS는 갤러리의 모양을 설정하는 데 사용되며 jQuery는 대체 이미지로 기본 이미지를 변경하는 데 사용됩니다.

 

 

 

HTML 코드

메인 이미지를 위한 영역을 생성한 다음 모든 대체 이미지를 오른쪽에 배치 할 공간을 만들어야합니다. 먼저 모든 것을 위해 컨테이너 div를 시작합니다.

 

<div class="gallery">

</div>

 

이제 메인 이미지 영역을 만들 수 있습니다.이를 위해 다른 div가 필요하고 이미지가 내부에 있습니다.

 

 

<div class="gallery">
    <div class="main_image">
        <img src="images/aston.jpg" />
    </div>
</div>

 

지금은 CSS를 사용하여 스타일링에 대해 걱정할 필요가 없습니다. 이제 다른 모든 대체 이미지를 추가 할 수 있는 기본 이미지가 있습니다.

 

 

<div class="gallery">
    <div class="main_image">
        <img src="images/aston.jpg" />
    </div>

    <div class="selection_image">
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston2.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston3.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston4.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston5.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston6.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston7.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston8.jpg" />
        </div>
        <div class="thumb">
                 <div class="overlay"></div>
                 <img src="images/aston9.jpg" />
        </div>
    </div>
</div>

 

이것은 필요한 전체 HTML이며, 대체 이미지 각각에는 오버레이 div가 있으며 이미지 위에 투명 div를 배치하여 이미지를 회색조로 만드는 데 사용할 것입니다. ## CSS

HTML을 사용하면 위와 같이 갤러리처럼 보이도록 갤러리 스타일을 지정해야합니다. 먼저 기본 이미지와 대체 이미지의 두 가지 섹션을 만듭니다.

 

.main_image{
    width:48%;
    display:inline-block;
    border:3px solid #eee;
}
.main_image img{
    width:100%;
}
.selection_image{
    width:48%;
    display:inline-block;
}

 

이제 투명한 배경색으로 오버레이 div가 있는 대체 이미지의 스타일을 지정할 수 있습니다.

 

 

.thumb {
    position:relative; 
    width:25%; 
    height:15%; 
    display:inline-block; 
    margin:2px;
    border:4px solid #eee;
    outline:1px solid #ddd;
    }
.thumb:hover .overlay {
    opacity:0!important;
    cursor:pointer;
}
.overlay {
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    background:#000;opacity:0.4;
}
.selection_image img {
    width:100%;
    height:100%;    
}

 

위 CSS를 CSS 파일에 복사하십시오. 기본 이미지와 다른 이미지를위한 두 가지 영역이 생성됩니다. 대체 이미지들 각각은 오버레이 div를 가지며 호버 이벤트시에 오버레이 div가 호버 이벤트에 이미지를 표시하는 것을 보이지 않게 될 것이다. ## JQuery

이미지 갤러리는 이제 위의 이미지와 동일하게 보입니다. 대체 이미지의 호버 이미지에서 기본 이미지를 변경하는 기능을 추가 할 수 있습니다. 이 기능을 만들려면 몇 줄의 JavaScript 만 있으면됩니다.

 

$.(document).ready(function(){
    $.('.thumb').hover(function(){
          $('.main_image img').attr('src',$(this).children('img').attr('src'));
    });
})