FLASHを使わずページ内でスライドショーを表示(Smooth SlideShow編)

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

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

いくつかの選択肢はあるが、『Smooth SlideShow』

トップページにあるように、ページ内でのスライドショーが可能。

■導入・設定

以下のサイトにアクセスし、ダウンロード
JonDesign’s Smooth SlideShow

これからはMoo.fx版がお薦め。

解凍したファイルを以下の階層でアップロード

スタイルシート及びJavascriptファイル
js/slideshow/jd.slideshow.css
js/slideshow/mootools.release.83.js
js/slideshow/mootools.release.83.uncompressed.js
js/slideshow/showcase.slideshow.js
js/slideshow/timed.slideshow.js

マニュアル操作用画像ファイル他
js/slideshow/img/fleche1.gif
js/slideshow/img/fleche1.png
js/slideshow/img/fleche2.gif
js/slideshow/img/fleche2.png
js/slideshow/img/loading-bar-black.gif

読み込むのはこんな感じ
<script src=”js/slideshow/mootools.release.83.js” type=”text/javascript”></script>
<script src=”js/slideshow/timed.slideshow.js” type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”js/slideshow/jd.slideshow.css” media=”screen” />

表示させたい場所に以下のように記載
<div class=”timedSlideshow jdSlideshow” id=”mySlideshow”></div>
<script type=”text/javascript”>
countArticle = 0;
var mySlideData = new Array();
mySlideData[countArticle++] = new Array(
‘images/001.jpg’,
‘http://www.yahoo.co.jp’,
‘Item 2 Title’,
‘Item 2 Description’
);
mySlideData[countArticle++] = new Array(
‘images/002.jpg’,
‘http://www.google.co.jp’,
‘Item 3 Title’,
‘Item 3 Description’
);
</script>
<script type=”text/javascript”>
function startSlideshow() {
var slideshow = new timedSlideShow($(‘mySlideshow’), mySlideData);
}
addLoadEvent(startSlideshow);
</script>
</div>

 

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

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

スポンサーリンク