소개

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

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

 

절차

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

062511_1335_24Gall1.png

 

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

062511_1335_24Gall2.png

http://pikachoose.com/demo/

 

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

062511_1335_24Gall3.png

 

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

062511_1335_24Gall4.png

 

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

062511_1335_24Gall5.png

 

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

062511_1335_24Gall6.png

 

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

062511_1335_24Gall7.png

 

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

062511_1335_24Gall8.png

 

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

062511_1335_24Gall9.png

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

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

 

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

 

        <link type="text/css" href="/css/simple.css" rel="stylesheet" />

        <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>

        <script type="text/javascript" src="/scripts/jquery.pikachoose.js"></script>

        <script language="javascript">

            $(document).ready(function (){

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

                });

        </script>

 

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

 

</asp:Content>

 

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

062511_1335_24Gall10.png

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

http://umbraco.VisualAcademy.com/

 

마무리

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

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

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

 

 

끝.




관련글



관련 동영상 참고 자료

  1. Umbraco 개발 환경 구축
  2. Umbraco 설치
  3. 사용자 모드와 관리자 모드(백오피스)
  4. 새로운 페이지(Page) 만들기
  5. 한글 언어팩(Languages) 적용하기
  6. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
  7. 미디어 파일 관리
  8. 사용자(User) 관리
  9. 스타일 추가 및 변경
  10. 템플릿(Templates)과 마스터페이지(MasterPages)
  11. Umbraco 페이지 필드(태그(Tags))
  12. 문서 타입(Document Types)
  13. 문서 타입(Document Types)에 속성 추가
  14. 부모 문서 타입(Document Types) 사용하기
  15. 문서 타입(Document Types) 내보내기 및 가져오기
  16. 문서 타입(Document Types) 자식 노드 허용
  17. 기본 매크로(Macros) 사용하기
  18. 새로운 매크로(Macro) 만들기
  19. 매크로(Macro)에 파라미터 전달
  20. 사진 갤러리(Gallery) 만들기 1
  21. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
  22. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
  23. 회원(Members) 관리
  24. 사전(Dictionaries)
  25. 패키지(Packages)
  26. HTML 레벨의 스킨 파일 적용 1
  27. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
  28. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
  29. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
  30. 배포 : Umbraco CMS를 원격 서버에서 실행




profile

박용준(redplus at redplus.net)
.NET 개발/강의 프리랜서, MVP, MCT
데브렉(http://www.devlec.com) 전임 강사
닷넷코리아(http://www.dotnetkorea.com) 사이트 운영