https://photoswipe.com/ 

위 사이트에서 제공하는 라이브러리를 이용하여 그누보드5에 사용할 갤러리 스킨을 만들어 보겠습니다.

다른 라이브러리(예:jquery)에 영향을 받지 않는 기능이 괜찮은 갤러리 기능을 제공합니다.

제공하는 기능, 옵션 및 데모는 위 URL을 참조하시면 됩니다.

https://github.com/dimsemenov/photoswipe 에서 전체를 다운로드 받아 적용해 볼 수도 있습니다.

여기서는 메뉴얼에 제공하는 codepen 소스를 활용하여 그누보드5에 사용할 갤러리스킨을 만들어 보겠습니다.

1. 배포판에서 제공하는 갤러리 스킨 폴더를 복사합니다.

 복사한 폴더 이름을 적당하게 부여합니다. (여기서는 swipe)

2. codepen에 css 코드를 복사하여 스킨내 style.css에 붙여넣기 합니다.

3. codepen에서 톱니모양 설정을 눌러 외부 css, js를 스킨 list.skin.php파일내 상단에 적용합니다.

4. codepen에서 js코드를 복사하여 list.skin.php내 하단에 붙여넣기 합니다.

5. codepn에서 HTML 코드를 잘 살펴보고 list.skin.php내 이미지 적용되는 부분에 적절히 반영합니다.

강좌에서 설명하는 스킨은 첨부파일로 제공됩니다.