HYENA0 : Don't be boiled frog

티스토리에 슬라이드쇼 달기

 구글 AJAX의 슬라이드쇼 샘플은 아래와 같다. 적색의 부분만 사용자가 직접 수정하면 된다.
 . YOUR-KEY : 구글 AJAX에 가서 사인하면 된다.
 . RSS주소 : 웹앨범에서 제공하는 RSS 주소를 삽입한다.

녹색은 사진의 크기에 해당하는 부분으로 웹앨범에서 제공하는 사진의 크기로 정하면 되는데, 블로그 페이지의 크기와도 상관있으니 유의해야 한다.

당신의 웹페이지에 AJAX를 이용해서 슬라이드 쇼를 만들고자 한다면 아래와 같은 절차를 거치면 된다.

Step 1 - AJAX Feed API 와 슬라이드 쇼를 로딩하자.

첫번째 스텝은 Google AJAX Feed API와 슬라이드쇼 코드를 삽입하면 된다.
그전에 Google AJAX Feed API를 사용하기 위해서는 Key가 필요한데, 아래 코드의 "YOUR-KEY" 부분을 구글에 가서 가입하고 다운받으면 된다.

<script src="http://www.google.com/jsapi/?key=YOUR-KEY"
      type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
      type="text/javascript"></script>
     
Step 2 - 슬라이드 쇼에 대한 웹페이지의 위치를 정하자.

다음 스텝은 슬라이드 쇼를 설정할 위치를 정하는 것이다. 이것은 일반적으로 "div" 로 구성된다.
이렇게 해서 한개 이상의 슬라이드 쇼를 가질 수 있다.

<div id="slideShow">Loading...</div>

추가의 코드를 삽입하면 슬라이드 쇼의 상하좌우 크기 등의 속성도 설정할 수 있다.

Step 3 - GF슬라이드쇼를 생성하고 웹페이지에 붙여넣자.

최종단계는 슬라이드 쇼의 제어판을 생성하고 설정하는 것이다. 이과정의 첫단계는 실제 동작할 당신 코드를 얻는 것과 AJAX Feed API를 로드하는 것이다. 가장 쉬운 방법은 슬라이드 쇼를 초기화 하는 간단한 함수를 작성하고 google.setOnLoadCallback()를 이용하는 것이다.

<script type="text/javascript">
  function LoadSlideShow() {
    var feed  = "RSS 주소";
    var options = {displayTime:2000, transistionTime:600, scaleImages:true};
    var ss = new GFslideShow(feed, "slideShow", options);
  }
  /**
   * Use google.load() to load the AJAX Feeds API
   * Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
   */
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadSlideShow);
</script>

붉은색의 RSS 주소 부분을 수정하여 원하는 RSS 이미지를 확보하면 된다. Picasa, Flicker 등의 사이트에서 만든 웹 앨범에 대하여 RSS Feed 를 제공하므로 링크하면 될 것이다.

 예:
      samples = "http://www.google.com/uds/solutions/slideshow/sample.rss";
      picasa = "http://picasaweb.google.com/data/feed/base/user/tester/albumid/4938389041003364369?kind=photo&alt=rss";
      flickr = "http://api.flickr.com/services/feeds/photos_public.gne?id=8331815@N03&format=rss_200";

 
 다음의 사이트에서 보면 예제를 포함하고 있으니 확인하시기 바란다.
http://www.google.com/uds/solutions/slideshow/reference.html

 그리고 샘플대로 구현하면 아래와 같다.

나만의 지도 만들기 (2)

 지도에 원하는 위치에 Placemark 를 선택후 클릭하면 아래와 같이 마크와 글풍선이 나타난다. 글풍선에는 제목과 내용을 쓸 수 있는데, 내용을 쓰는 것은 세가지 방법으로 분류된다. Plain text, Rich text, Edit HTML 인데 다양한 입력을 사용하려고 한다면, 두번째의 풍부한 텍스트를 사용하면 되겠다.

 풍부한 텍스트 위주로 설명하면, 글의 서식을 변경하기 쉽고 색과 링크를 걸 수 있는 등 기능이 다양해 진다.


 아래 내용과 같이 표시한 위치에 사진과 글을 넣으려고 한다. 우선 글은 'Description' 내에 쓰면되고, 사진은 'Rich Text' 를 선택하면 우측 끝에 그림아이콘이 있는데, 이것을 선택한다. 그림아이콘은 PC내의 이미지 파일을 업로드할 수는 없고 http:// 링크를 걸 수 있도록 되어 있다. 이 아이콘은 웹메일에 있는 이미지만을 등록할 수 있는데, 여기서는 Picasa 서비스를 이용해서 등록하는 방법을 알아보겠다.

이미지 등록하기

 피카사 서비스를 이용하기 위해서는 계정이 있어야 한다. 피카사에서 업로드된 이미지를 선택하면 우측에 링크하기가 있다. 링크를 선택하고 'HTML을 웹사이트에 포함시키기'를 선택해서 html 내용을 복사한다. 복사하기 전에 원하는 이미지 사이즈를 결정해야 지도에 보이는 크기를 정할 수 있다.


 구글맵으로 돌아가서 'Rich Text'에서 내용을 쓰고 'Edit HTML'을 선택한 뒤, 복사한 HTML 내용을 붙여넣는다.


그런 다음 'OK' 버튼을 누르고, 좌측의 'My Maps'에서 Save 후 Done 버튼을 누르면 완료된다.