デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

Slideshow

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

    ·

    master

    サイト内で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>

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

    ·

    master

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

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

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

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

    ■導入・設定

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

    YUIで使うのは以下no５ファイル
    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>