[Blogspot] Picasa Gallery 만들기

사진들을 보관할 수 있는 많은 클라우드 서비스 들이 있는 데요.
그 중 구글에서 제공하고 있는 Picasa의 API를 이용하여 피카사 갤러리를 만들어 보았습니다.

이전에는 웹서핑을 하다 다른분이 만들었던것으로 임시로 사용하고 있었는데요, 당시 방식은 일일이 앨범마다 페이지를 새로 만들어서 해당 앨범으로의 링크를 거는 것이었던 것을 이번에는 여러가지 기능 개선을 시켜보았습니다.

우선, 일일이 원하는 앨범을 입력하는 방식이 아닌.. 피카사 내의 앨범 중 비공개 앨범을 제외한 전체 공개 앨범만 불러와서 썸네일과 함께 Title를 보여주고, 사진 선택시 페이지 전환없이 한페이지에서 해당 앨범내의 사진들의 썸네일을 보여주도록 하였습니다. 


예제는 아래를 보시면 되구요.

 제 갤러리는 아래 예제에다가 이전에 포스트 했던 Pinterest의 레이아웃을 입히도록 약간의 수정이 더해진 상태입니다.

전체 앨범 보기

위에 "전체 앨범 보기" 링크로 어디서든 처음의 초기화면으로 돌아갈 수가 있구요.

전체 앨범 상태에서는 사진을 클릭시 현재 페이지 내에서 해당 앨범의 사진을 볼 수 있고, 앨범 밑에 Title를 클릭시 새로운 창에서 해당 Picasa의 앨범이 열리도록 되어 있습니다. 


그리고, 각 앨범에서는 사진이나 Title 선택시 모두 새로운 창에서 해당 Picasa의 앨범이 열리도록 되어 있습니다.

그럼 위 기능을 구현하기 위한 코드를 보시겠습니다.

제 전 포스트들를 보시면 아시겠지만 언제나 봐야할 곳은 마지막 window.onload = function(){} 안에 들어 있습니다. 간단하게 하나씩 살펴 보겠습니다.
id = 'creatorhong'; - 피카사의 아이디를 입력하면 됩니다.
                          숫자로 된 ID나 gmail의 ID를 입력하시면 됩니다.
width = 200;    - 이미지의 넓이
height = 200;  - 이미지의 높이

이상만 수정해 주시면 완료. 더 자세한 것은 코드 내부를 수정해 주시거나, css 수정을 통해서 수정해 주시면 됩니다.