非常に滑らかな動きで、オンマウス時にピタリと止まってくれるので、ちょっとしたメニューとして入れてみても良いかもと思えます。
Sample Image Orignal Link /
5978 High Quality Icons for Web, Apps & RSS
この前の記事でmootoolsを使用した同様のものを紹介しましたが、こちらのほうが設置、設定共に簡単で、使いやすいと思います。
画像も特にサイズを合せたりしなくとも、表示位置の大きさに合せて自動で調節されるので、画像同士の高さの差があまりにも大きくなければ、そのままxmlファイルに書き込んでも大丈夫だと思います。
折りたたむ
xmlファイル書き方
表示する画像は全て、ここに書き込みます。
サイズはjsで書き込んだ全体のサイズに自動で縮小されるのでここでは画像パスと、画像からのリンクを書き込みます。
<?xml version="1.0" encoding="utf-8"?>
<!--
fhShow Carousel 1.7 configuration file
Please visit http://www.flshow.net/ for more info
-->
<slide_show>
<options>
<!-- 背景色設定 -->
<background>#FFFFFF</background> <!-- #RRGGBB, transparent -->
</options>
<photo href="画像に付けるリンクパス" target="_self">画像パス</photo>
<!-- 以下例 -->
<photo href="http://www.flshow.net/" target="_self">./Carousel_swf_01.png</photo>
<photo href="http://www.flshow.net/" target="_self">./Carousel_swf_02.png</photo>
<photo href="http://www.flshow.net/" target="_self">./Carousel_swf_03.png</photo>
<!-- 後は画像分同じものが続きます。 -->
</slide_show>
html内書き方
<script type="text/javascript" src="./swfobject.js"></script>
<style type="text/css">
/*表示するdiv要素のスタイル(位置などはここで)*/
#carousel1{margin: 0px auto;}
</style>
<div id="carousel1"></div> <!-- Carousel_swfの表示部分 -->
<!-- Carousel_swfのスクリプトによるスタイルなどの設定 -->
<script type="text/javascript">
swfobject.embedSWF("./Carousel.swf",//Carousel.swfのパス
"carousel1",//任意のid
"530", "300",//Carousel.swf全体のサイズ 幅、高さの順
"9.0.0",//使用するFlashプレイヤーのバージョン
false,//Flashプレイヤーを自動でインストールするか、否かの設定(falseで否)
{xmlfile:"./default.xml",//xmlファイルのパス
loaderColor:"0x666666"},//ローディング画像の色
{bgcolor: "#FFFFFF"});//背景色(xmlで設定したものに合せる)
</script>
折りたたむ
downloadのタブをクリックして、2段目。
公開しているソースは自分が後で使用するためのものです。ただ、設置しようとして分からなくなった場合、より多くのサンプルソースがあったほうが良いと思いますので、公開しております。
テーマ : みんなに紹介したいこと - ジャンル : ブログ
タグ : FLASH 3D 画像ギャラリー系
2009/02/17 16:45 |
何でも挑戦！ブログカスタム
| COMMENT(0)
| TRACKBACK(0)
TOP
トラックバック Trackback URL
この記事にトラックバックする(FC2ブログユーザー)