Unite Gallery 를 이용한 반응형 갤러리 만들기

갤러리 형태를 html, css, javascript 로 구성을 하다가 괜찮은 플러그인이 없는지 찾아보았는데

마침 괜찮은게 있어서 메모해보려 한다.

Unite Gallery

Unite Gallery 플러그인은 다양한 형태의 갤러리를 제공한다. Unite Gallery

진짜 너~무 많으니 직접 둘러보길 바라며 다음은 설정하는 부분이다.

---

Compact Theme - left panel position

글쓴이는 Compact Theme - left panel position 형태를 사용해 보았다. 메인 이미지가 우측에 큰 사이즈로 나오며
좌측에 스크롤 형태로 작은 이미지들이 썸네일로 표시된다. 좌측 패널 쪽에서 마우스 휠을 이용한 스크롤이 아니라
마우스를 위아래로 움직이면 자동 스크롤링되며 썸네일을 클릭하면 우측에 큰 사이즈로 표시된다.

---

Style, Script

Documentation을 보면 먼저 필요한 style, script의 cdn 주소가 있다.

만약 운영하는 웹이 443이 아니라면 직접 다운받아서 쓰도록 하자(80에서 부르지 못함)

글쓴이꺼는 다운받아서 사용하면 된다.

ug-theme-compact.js

10.2 kB

unitegallery.min.js

217.7 kB

ug-theme-default.css

3.6 kB

unite-gallery.css

31.7 kB

---

사용방법

jQuery는 본인이 쓰는 것을 사용

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script type="text/javascript" src="unitegallery.min.js"></script>
<link rel="stylesheet" type="text/css" href="unite-gallery.css" />
<script type="text/javascript" src="ug-theme-compact.js"></script>
<link rel="stylesheet" type="text/css" href="ug-theme-default.css" />

---

$(fucntion() {
    $("#gallery").unitegallery({
        gallery_theme: "compact",
        theme_panel_position: "left",


        gallery_width:800,                            //gallery width        
        gallery_height:400,                            //gallery height
        gallery_images_preload_type: "minimal"
    });
});

옵션에 대한 부분은 여기서 확인하고 필요한 것을 사용하도록 하자 Compact Theme Option

---

위 소스를 추가한 다음 이미지를 표시할 div 태그를 생성한다.

여기서 주의할 점은 내부 html의 태그가 다른 것이 들어가니 에러를 뱉었다.(사용법 미숙)
기존에 글쓴이는 div 태그 안에 ul > li > img 형식이였으나 이 구성은 the item should not be image type 에러를 출력하기에 순수하게 img태그만 구성했더니 성공했다.

따라서 샘플 소스는 아래처럼 먼저 구성하길 바란다. (구현부터하고 바꿔서 되는지 테스트 해보면되니까 ㅎㅎ)

<div id="gallery">
    <img src="https://unitegallery.net/images-preview/image13.jpg" data-image="https://unitegallery.net/images-preview/image13.jpg" />
        <img src="https://unitegallery.net/images-preview/image12.jpg" data-image="https://unitegallery.net/images-preview/image12.jpg" />
        <img src="https://unitegallery.net/images-preview/image02.jpg" data-image="https://unitegallery.net/images-preview/image02.jpg" />
        <img src="https://unitegallery.net/images-preview/image01.jpg" data-image="https://unitegallery.net/images-preview/image01.jpg" />
        <img src="https://unitegallery.net/images-preview/image04.jpg" data-image="https://unitegallery.net/images-preview/image04.jpg" />
        <img src="https://unitegallery.net/images-preview/image13.jpg" data-image="https://unitegallery.net/images-preview/image13.jpg" />
        <img src="https://unitegallery.net/images-preview/image12.jpg" data-image="https://unitegallery.net/images-preview/image12.jpg" />
        <img src="https://unitegallery.net/images-preview/image02.jpg" data-image="https://unitegallery.net/images-preview/image02.jpg" />
        <img src="https://unitegallery.net/images-preview/image01.jpg" data-image="https://unitegallery.net/images-preview/image01.jpg" />
        <img src="https://unitegallery.net/images-preview/image04.jpg" data-image="https://unitegallery.net/images-preview/image04.jpg" />
        <img src="https://unitegallery.net/images-preview/image13.jpg" data-image="https://unitegallery.net/images-preview/image13.jpg" />
        <img src="https://unitegallery.net/images-preview/image12.jpg" data-image="https://unitegallery.net/images-preview/image12.jpg" />
        <img src="https://unitegallery.net/images-preview/image02.jpg" data-image="https://unitegallery.net/images-preview/image02.jpg" />
        <img src="https://unitegallery.net/images-preview/image01.jpg" data-image="https://unitegallery.net/images-preview/image01.jpg" />
        <img src="https://unitegallery.net/images-preview/image04.jpg" data-image="https://unitegallery.net/images-preview/image04.jpg" />
</div>

이미지는 샘플용으로 Unite Gallery에서 사용 중인 이미지 URL을 임의로 가져왔다.
스크롤이 되는지 확인하기 위해 같은 이미지 5개를 3번 추가하여 총 15개 태그를 생성함.
img 태그의 data-image 에도 같은 url 주소를 추가해주지 않으면 이미지가 나오지 않는다.

---

실행결과

여기까지 순차적으로 따라왔다면 다음과 같은 화면이 나올 것이며 구현에 성공한 것이다.

---

구현하고 나서 보니 옵션에 있을 법하지만 우측 이미지의 하단에 검정색 부분이 약간 보여서 아래 소스를 추가해서 그냥 감춤

최종 스크립트는 아래로 확정

$(fucntion() {
    $("#gallery").unitegallery({
        gallery_theme: "compact",
        theme_panel_position: "left",


        gallery_width:800,                            //gallery width        
        gallery_height:400,                            //gallery height
        gallery_images_preload_type: "minimal"
    });
    $(".ug-textpanel-bg").css("display", "none"); // 하단 검정 탭 숨김
});