FLASHを使わずページ内でスライドショーを表示させたい時

サイト内でFLASHを使わずにスライドショーを表示させるのは、様々なライブラリが提供されるようになったので、割と簡単にデザインセンスの高いものが作れるようになったが、多くのスライドショー用ライブラリは、背景に元のページが暗く表示され画面内にポップアップするような形のものが多い。

今回、ページ内の一部でそのままスライドショーをさせたかったので、
その条件を満たすものを選び設置することにした。

いくつかの選択肢はあるが、『YUI-based Slideshow』

トップページにあるように、ページ内でのスライドショーが可能。
また
Sliding
Squeezing
Fading
の三種類の効果を使うことができる。

■導入・設定

以下のサイトにアクセスし、ダウンロード
YUI-based Slideshow
Download YUI version 2.5.2,

YUIで使うのは以下no5ファイル
yahoo.js
dom.js
event.js
connection.js
animation.js
これらはyuiフォルダに入れjsフォルダにアップロード

slideshow.js
jsフォルダにアップロード

読み込むのはこんな感じ
<script type=”text/javascript” src=”js/yui/yahoo.js”></script>
<script type=”text/javascript” src=”js/yui/dom.js”></script>
<script type=”text/javascript” src=”js/yui/event.js”></script>
<script type=”text/javascript” src=”js/yui/connection.js”></script>
<script type=”text/javascript” src=”js/yui/animation.js”></script>
<script type=”text/javascript” src=”js/slideshow.js”></script>

<link type=”text/css” rel=”stylesheet” href=”js/slideshow.css” />

表示させたい場所に以下のように記載
frame_1〜3のような書き方でも、frame_4の書き方でもいい。

<div id=”yui-sldshw-displayer2″ class=”yui-sldshw-displayer” style=”width:400px;height:300px;”>
<img id=”frame_1″ class=”yui-sldshw-active yui-sldshw-frame” src=”http://www.hoge.com/img001.jpg” />
<img id=”frame_2″ class=”yui-sldshw-active yui-sldshw-frame” src=”http://www.hoge.com/img002.jpg” />
<img id=”frame_3″ class=”yui-sldshw-active yui-sldshw-frame” src=”http://www.hoge.com/img003.jpg” />
<div id=”frame_4″ class=”yui-sldshw-active yui-sldshw-frame”>
<img src=”http://www.hoge.com/img004.jpg” />
</div>
</div>

効果の設定・ループの設定はこんな感じ。

<script type=”text/javascript”>
YAHOO.util.Event.addListener(window, “load”, function() {
slideshow2 = new YAHOO.myowndb.slideshow(“yui-sldshw-displayer2”,{effect: YAHOO.myowndb.slideshow.effects.fadeOut});
slideshow2.loop();
});
</script>

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク