3월 14, 2023
Justified Gallery | 멋있는 윕페이지 이미지 갤러리| 타이틀 수정
저스트파이드 갤러리는 게시글 페이지에 이미지를 아름다운 형태로 배치할 수 있는 갤러리 플러그인(plugin)이다. 무료로 배포되는 스크립트를 블로그 템플릿에 넣고 약간의 코딩만 하면 페이지마다 아름다운 이미지 갤러리를 만들 수 있다.
만드는 과정
스크립트 삽입
아래의 스크립트를 템플릿 <head>와 </head> 사이에 넣는다.
<script src='https://storage.cloud.google.com/jgallery/jquery.justifiedGallery.min.js'/>
<link href='https://storage.cloud.google.com/jgallery/justifiedGallery.min.css' rel='stylesheet'/>
이미지 코딩
이미지 Title(연두)이나 Alt(파랑)에 내용을 기재하면 마우스 오버 시 출력된다. 두 곳에 각기 다른 내용을 넣으면 Alt만 출력되고 ‘라이트 박스’와 충돌이 되므로 Title 이용이 권장된다. 구글 블로그의 경우 이미지 업로드 시 자동으로 아래 형식처럼 되므로 ‘Title’만 작성하면 된다. 단 이미지마다 만들어지는 div는 첫 번째 말고는 모두 제거해야 한다. 즉, 1개의 div(id 포함) 안에 이미지들이 들어가서 갤러리가 된다는 의미이다.
<div id="Lgallery" >
<a href="path/image1.jpg" title="">
<img alt="" src="path/thumbnail1.jpg"/>
</a>
</div>//제거
<div>//제거
<a href="path/image2.jpg" title="">
<img alt="" src="path/thumbnail2.jpg"/>
</a>
</div>//제거
<!-- more images -->
</div>
<a href="path/image1.jpg" title="">
<img alt="" src="path/thumbnail1.jpg"/>
</a>
</div>//제거
<div>//제거
<a href="path/image2.jpg" title="">
<img alt="" src="path/thumbnail2.jpg"/>
</a>
</div>//제거
<!-- more images -->
</div>
스크립트 코딩
스크립트 코딩에 따라 갤러리 모양을 바꿀 수 있다. 갤러리 아이디(id)는 임의로 독창성 있게 만들되, 이미지 div id와 반드시 같아야 한다. 위치는 페이지 내 이미지 삽입 부분 다음에 넣으면 된다.
<script>
$('#Lgallery').justifiedGallery({
rowHeight : 150,
lastRow: 'justify',
captions: true,
rel: 'uniqueName',
captionsShowAlways : true,
margins : 5,
nonVisibleOpacity: 0.7
});
</script>
$('#Lgallery').justifiedGallery({
rowHeight : 150,
lastRow: 'justify',
captions: true,
rel: 'uniqueName',
captionsShowAlways : true,
margins : 5,
nonVisibleOpacity: 0.7
});
</script>
타이틀 코딩
게시글 내용 하단에 아래처럼 스타일을 지정하고 코딩을 하면 타이틀의 크기, 색상, 위치 등을 자유자재로 수정할 수 있다. 스타일을 지정하지 않으면 기본(디폴트)으로 출력된다.
<style>
.justified-gallery > a > .jg-caption, .justified-gallery > div > .jg-caption, .justified-gallery > figure > .jg-caption {
display: none;
position: absolute;
bottom: 50px;
padding: 5px;
background-color:#232b74;
left: 0;
right: 0;
margin: 0;
color: white;
font-size: 17px;
font-weight: 500;
font-family: sans-serif;
</style>