[Umbraco 강좌] 24. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용

아티클
07/07/2011

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 강좌는 간단한 사진 갤러리 작업의 마지막 시간입니다.

Umbraco CMS에서 자바스크립트를 인클루드하여 사용하는 방법 중 jQuery 플러그인을 적용하는 방법에 대해 설명합니다.

절차

1. 아래 그림은 현재까지 만들어진 사진 갤러리의 모습을 나타냅니다. [Gallery] 페이지에 사진을 2개 업로드 한 상태를 단순 리스트로 출력하는 예입니다.

2. 사진 갤러리를 표시해주는 수많은 jQuery 플러그인 중 하나인 PikaChoose 플러그인을 아래 경로에서 다운로드 받고 압축을 풉니다.

https://pikachoose.com/demo/

3. 압축 푼 소스의 아래 경로에 가면 simple.html 문서가 들어있습니다. 이를 활용하여 현재 만들고 있는 갤러리에 적용해 보도록 하겠습니다.

4. 위 경로의 simple.html 문서를 웹 브라우저로 실행해보면 간단하게 사진이 슬라이드쇼로 보여집니다.

5. simple.html 문서를 Visual Studio 2010과 같은 에디터로 열어보니 아래와 같이 단순하게 적용할 수 있는 형태로 제작되어져 있습니다.

6. 다운로드 받은 플로그인의 소스 중 jquery.pikachoose.js 파일을 복사한 후 이를 Umbraco CMS의 scripts 폴더에 붙여넣기 합니다.

7. 다운로드 받은 플러그인 소스 중 simple.html 페이지에서 사용한 simple.css 파일을 복사한 후 Umbraco CMS의 css 폴더에 붙여넣기 합니다.

8. Umbraco [백오피스]로 돌아와서 XSLT 파일 중 [lstPhotos.xslt] 파일을 열고 아래와 같이 ul 태그에 id 속성을 주고 속성값으로 "pikame"를 지정합니다.

9. [백오피스]의 템플릿 중 [Gallery] 템플릿을 열고 아래와 같이 소스를 입력합니다.

위에서 입력된 소스는 아래와 같습니다.

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">

$(document).ready(function (){

$("#pikame").PikaChoose();

});

</script>

<umbraco:Macro Alias="LstPhotos" runat="server"></umbraco:Macro>

</asp:Content>

10. [Gallery] 페이지를 다시 웹 브라우저로 실행시키면 아래 그림과 같이 2개의 이미지가 슬라이드 형태로 실행됨을 확인할 수 있습니다. 다만, 이미지 사이즈가 조금 달라서 표현되는 모양이 조금 달라 보일 뿐입니다.

현재까지의 소스는 아래 경로에서 실시간으로 확인할 수 있습니다.

https://umbraco.VisualAcademy.com/

마무리

문서 타입 생성부터 템플릿 편집 그리고 페이지 생성 후 XSLT 사용 및 jQuery 플러그인까지의 전반적인 순서대로 하나의 완성된 사진 갤러리를 완성해 보았습니다.

Umbraco CMS는 이처럼 기존 웹 개발 기술에 전반적으로 사용하던 방식을 어렵지 않게 구현할 수 있습니다.

이번 시간은 [Upload]와 [Folder Browser] 타입의 문서 타입으로 이러한 기능을 구현했지만, 실제로는 Umbraco CMS에 훨씬 더 다양한 Data Type이 존재합니다. 다 설명 드리지 못하겠지만 이러한 많은 수의 Data Type을 사용하여 현업에서 필요한 여러 가지 기능을 웹 기반으로 구현할 수 있는 CMS로서의 역할을 충분히 하고 있는 모습을 보여주고 있습니다.

끝.

관련글

다음을 통해 공유

[Umbraco 강좌] 24. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용

추가 리소스