UIStory: 7월 2008

이미지 사이즈가 커서 구글 피카사에 올리는 일이 많았는데...

google site기능에 flash slide 기능을 만들어 놓은 것이 있어 한번 테스트 해보았다.

아래 코드데로 사용하면 picasaweb의 이미지를 표시할 수 있다.

대단한 구글이라고 생각한다. 이것을 드림위버에서 자연스럽게 가능할 것으로 보인다.

app 의 승리라고나 할까??

알고보니 How can I embed a slideshow into my blog or webpage?

에 자세히 나와 있네요...

picasaweb을 한국어로 설정하면 해당 메뉴가 안나옵니다. 아직은 영문에서만 제공되는 기능 입니다.

구글은 역시 메일 메일 변신하는 느낌이 듭니다. (picasaweb의 설정에서 한국어를 English로 바꾸고 위의 설명데로 합니다.)

그러면 Embed Slideshow 라는 링크가 나옵니다.

View Album

Get your own

-------------------------------

IE7 에서 Google picasaweb의 SlideShow 가 안되는 문제

위의 테스트를 IE6에서 하고서 IE7에서 보니 큭 이럴수가 안된다.

firefox에서는 되는데... 이런 IE7 이라구...

MS의 IE8이 빨랑 나왔으면 좋겠다는 생각이 문득 든다.

해서 찾다보니 이런것도 있더라.

picasaweb에서 slideshow를 html(ajax)로도 해준당...

소스는 이렇게 수정 했다. (IE6와 IE7의 구분 을 하고)

<HTML>
<HEAD>
<script language="javascript">
<!--//
window.onload = backgroundChange;    // 윈도우가 로드되면 backgroundChange함수 실행
function backgroundChange(){                                         // backgroundChange함수 시작
     var oDiv=document.getElementById("testDiv");

      if( navigator.appName.indexOf("Microsoft") > -1 ){         // 마이크로소프트 익스플로러인지 확인
        if( navigator.appVersion.indexOf("MSIE 6") > -1){         // 익스플로러이면 버전 6인지 확인
            oDiv.innerHTML = '<div class="goog-ws-dash-box goog-ws-dash-box-border" style="display:table-cell; width: 800px;"><div class="goog-ws-dash-box-inside"><embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="800" height="533" wmode="transparent" flashvars="host=picasaweb.google.com&captions=1&amp;RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Foutofwrd%2Falbum%2FrzXWpD%3Fkind%3Dphoto%26alt%3Drss%26" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></div></div>';

        }else if(navigator.appVersion.indexOf("MSIE 7") > -1){ // 익스 플로러이면 버전 7인지 확인
            oDiv.innerHTML = '<IFRAME border=none name=showroom_iframe marginWidth=0 marginHeight=0 frameborder=0 src="http://picasaweb.google.com/outofwrd/rzXWpD/photo#s5225837495190074290" width="100%" height=100%></IFRAME>';
        }else {
        }
    }else{                                                                               // 익스플로러가 아닐 경우
       oDiv.style.backgroundImage = "url('a.gif')";

}
}

//-->

</script>
</HEAD>
<BODY>

      if( navigator.appName.indexOf("Microsoft") > -1 ){         // 마이크로소프트 익스플로러인지 확인
        if( navigator.appVersion.indexOf("MSIE 6") > -1){         // 익스플로러이면 버전 6인지 확인
            oDiv.innerHTML = '<div class="goog-ws-dash-box goog-ws-dash-box-border" style="display:table-cell; width: 800px;"><div class="goog-ws-dash-box-inside"><embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="800px" height="533px" wmode="transparent" flashvars="host=picasaweb.google.com&captions=1&amp;RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Foutofwrd%2Falbum%2FrzXWpD%3Fkind%3Dphoto%26alt%3Drss%26" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></div></div>';

        }else if(navigator.appVersion.indexOf("MSIE 7") > -1){ // 익스 플로러이면 버전 7인지 확인
            oDiv.innerHTML = '<IFRAME border=none name=showroom_iframe marginWidth=0 marginHeight=0 frameborder=0 src="http://picasaweb.google.com/outofwrd/rzXWpD/photo#s5225837495190074290" width="800px" height=533px></IFRAME>';
        }else {
        }
    }else{                                                                               // 익스플로러가 아닐 경우
       oDiv.style.backgroundImage = "url('a.gif')";

}
}

//-->

</script>
<div id="testDiv" style="width:800px;height:533px"></div>

</BODY>
</HTML>

---------------- 데모 -------

naver에서는 iframe이 되지 않아 될라나 모르겠네요...

실제 소스는 아래와 같습니다.