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

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