10월 06, 2022 10월 09, 2021

블로그 페이지에 갤러리 만들기, swipebox 및 lightbox 활용

아름다운 사진 갤러리는 블로그에서 매우 중요합니다. 모바일 시대의 최대 관건인 협소한 모바일 공간의 효율적인 활용이 탁월한 갤러리 플러그인과 라이트박스(Light Box)를 알아봅니다. 라이트박스의 종류 및 차이점은 아래 갤러리 체험으로 대신합니다.

swipebox

lc_lightbox

갤러리 만들기

선행사항 사항으로 서버 사이트가 필요합니다. 구글앱엔진을 활용하면 소규모일 경우 무료로 사용 가능합니다. 등록 방법은 아래 사이트를 참고하시면 됩니다.

https://cloud.google.com/appengine

이 페이지에서 사용하는 갤러리 플러그인은 Justified Gallery(이하 JG 약칭)입니다. 공개 소스인 관계로 약간의 html 지식만 있으면 자유자재로 변경이 가능한 매우 훌륭한 플러그인으로 판단됩니다. 상세한 설명과 고급설정은 위의 다운로드 사이트를 참고하시면 되므로 작동원리와 기본 설정에 대해서 개요만 살펴보도록 합니다.

파일 업 로더

JG 사이트에서 내려받은 파일(폴더)을 서버에 업 로더 합니다.

파일 링크

서버에 업 로더 한 파일들을 연결합니다. 장소는 블로그의 head 영역이나 갤러리가 표시되는 페이지에 넣으면 됩니다.

<script src='http://code.jquery.com/jquery-latest.min.js'/><linkhref='https://storage.cloud.google.com/cjg_hj/css/justifiedGallery.min.css' rel='stylesheet'/>
<scriptsrc='https://storage.cloud.google.com/cjg_hj/dist/js/jquery.justifiedGallery.min.js'/>

페이지 스크립트

스크립트를 갤러리 페이지에 넣으면 됩니다.

<script>
    $('#g-gallery, #g-gallery1').justifiedGallery({
        lastRow: 'justify',
        captions: false,
        rowHeight : 150, 
        rel: 'uniqueName',
        margins : 5
    });
</script>

이미지 html 수정

이미지 html을 아래와 같은 방법으로 수정하면 완료됩니다.

<div id="g-gallery">

<a class="swipebox" title="원하는 내용" href="https://이미지 경로" ><img 1077" src="https://이미지 경로"/></a></div>

Dream Chaser