圖片輪播增加播放影音檔功能

圖片輪播增加播放影音檔功能

利用Freemake Video Converter轉檔FLV、SWF後，自動生成HTMLcode當範例，並使用fancybox的功能加寫影音資料去呈現，須有特定的大小和fancybox做對應。
1.Freemake Video Converter:https://mega.co.nz/temporary/mega/M85iUa7I
2.fancybox:http://fancybox.net/
3.輪播:1.js
4.結合fancybox和播放影音：2.js

-==========1.js================

$(function () {


    var $ulPic = $('ul.pic'),
    $ulPage = $('ul.page'),
    _liPicHtml = $ulPic.html(), //把裡面元素抓出來
    _width = $('#homebannerwrapper').width(),
nowIndex = 0,
timer,
speed = 6000, //換banner時間
    ipage = 0,
picLen = $ulPic.find('li').length;


    //---------------------------------------------------------------------
   
    //生出page dot
    $ulPic.find('li').each(function () {
        ipage += 1;
        $ulPage.append('<li id=' + ipage + '></li>');
    })
    $ulPage.css({ width: $('ul.page li').outerWidth(true) * picLen }); //outerWidth(true)=margin+padding
    timer = setTimeout(bannerMove, 0)
    //---------------------------------------------------------------------


    //把圖片變double
    $ulPic.html(_liPicHtml + _liPicHtml); //把值塞進去
    picLen = $('ul.pic li').length; //本來N張圖 現在變2N張了


    //init
    $ulPic.delay(7000);
    timer = setTimeout(bannerMove, speed)
   
    //---------------------------------------------------------------------


    //按左右
    $('#homebannerwrapper h2').click(function () {
        bannerMove();
    })
    $('#homebannerwrapper h3').click(function () {
        clearTimeout(timer);
        //$ulPic瞬間移動到中間
        if (nowIndex <= 0) {
            $ulPic.css({ left: picLen / 2 * _width * -1 - 40 });
            nowIndex = picLen / 2;
        }
        nowIndex = (nowIndex - 1 + picLen) % picLen; //上一張圖魔法指令
        //圖向左移動
        $ulPic.animate({ left: nowIndex * _width * -1 - 40 }, 350, function () {
            timer = setTimeout(bannerMove, speed)
        });
        dot();
    })


    $('ul.page li').click(function () {
        var nextindex = this.id - nowIndex - 1 ;        
        clearTimeout(timer);
        nowIndex = (nowIndex + nextindex) % picLen; //下一張圖魔法指令
        //圖向左移動
        $ulPic.animate({ left: nowIndex * _width * -1 - 40 }, 350, function () {
            //$ulPic瞬間移動到最左邊
            if (nowIndex >= picLen / 2) {
                $ulPic.css({ left: -40 });
                nowIndex = 0;
            }
            timer = setTimeout(bannerMove, speed)
        });
        dot();
        
    })




    //圖片移動
    function bannerMove() {
        clearTimeout(timer);
        nowIndex = (nowIndex + 1) % picLen; //下一張圖魔法指令
        //圖向左移動
        $ulPic.animate({ left: nowIndex * _width * -1 - 40 }, 350, function () {
            //$ulPic瞬間移動到最左邊
            if (nowIndex >= picLen / 2) {
                $ulPic.css({ left: -40 });
                nowIndex = 0;
            }
            timer = setTimeout(bannerMove, speed)
        });
        dot();
    }


    function dot() {
        //dot change color
        $ulPage.find('li').removeClass('DotColor').eq(nowIndex).addClass('DotColor');
        if (nowIndex == 15) {
            $ulPage.find('li').eq(0).addClass('DotColor');
        }
    }
})

-==========2.js================

$(function () {
    $('.fancybox[datatype="SWF"]').click(function () {
        var url = $(this).attr('href');
        $.fancybox({
            'padding': 0,
            'margin': 0,
            'overlayOpacity': 0.7,
            'overlayColor': '#060606',
            'autoDimensions': false,
            'width': 640,
            'height': 480,
            'content': '<div style="position: relative; width: 640px;">' +
                          '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id=0 align="middle" width=640 height=480>' +
                          '<param name="movie" value="' + url + '" />' +
                          '<param name="menu" value="true" />' +
                          '<param name="quality" value="high" />' +
                          '<param name="bgcolor" value="#FFFFFF" />' +
                          '<param name="wmode" value="transparent" />' +
                          '<embed wmode="transparent" src="' + url + '" menu="true" quality="high" bgcolor="#FFFFFF" width=640 height=480 name="player" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
                          '</object>' +
            //<a href="http://www.freemake.com/"><img alt="Made with Freemake video software" src="http://www.freemake.com/favicon.ico" style="background-color: transparent;position: absolute;top: 20px;right: 20px;z-index: 9999;border-style: none;opacity:0.6;filter:alpha(opacity=60);"></img></a>
                          '</div>',
            'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
            'onClosed': function () { $("#fancybox-inner").empty(); }
            //            'padding': 0,
            //            'autoScale': false,
            //            'transitionIn': 'none',
            //            'transitionOut': 'none',
            //            'titlePosition': 'outside',
            //            'width': 600,
            //            'height': 490,
            //            'href': this.href,
            //            'type': 'swf',
            //            'swf': {
            //                'wmode': 'transparent',
            //                'allowfullscreen': 'true'
            //            }


        });
        return false;
    });
    $('.fancybox[datatype="FLV"]').click(function () {
        var url = $(this).attr('href');
        $.fancybox({
            'padding': 0,
            'margin': 0,
            'overlayOpacity': 0.7,
            'overlayColor': '#060606',
            'autoDimensions': false,
            'width': 640,
            'height': 480,
            'content': '<div style="position: relative; width: 640px;">' +
                          '<object id=0 type="application/x-shockwave-flash" data=player_flv_maxi.swf width=640 height=480>' +
                          '<param name="movie" value=player_flv_maxi.swf />' +
                          '<param name="wmode" value="opaque" />' +
                          '<param name="allowFullScreen" value="true" />' +
                          '<param name="allowScriptAccess" value="sameDomain" />' +
                          '<param name="quality" value="high" />' +
                          '<param name="menu" value="true" />' +
                          '<param name="autoplay" value="true" />' +
                          '<param name="autoload" value="false" />' +
                          '<param name="FlashVars" value="flv=' + url + '&width=640&height=480&autoplay=1&autoload=0&&showplayer=always&buffer=5&buffermessage=&playercolor=464646&loadingcolor=999898&buttoncolor=ffffff&buttonovercolor=dddcdc&slidercolor=ffffff&sliderovercolor=dddcdc&showvolume=1&showfullscreen=1&playeralpha=100&margin=0&buffershowbg=0" />' +
                          '</object>' +
            //<a href="http://www.freemake.com/"><img alt="Provided by Freemake software developer" src="http://www.freemake.com/favicon.ico" style="background-color: transparent;position: absolute;top: 20px;right: 20px;z-index: 9999;border-style: none;opacity:0.6;filter:alpha(opacity=60);"></img></a>
                          '</div>',
            //                'content': '<object type="application/x-shockwave-flash"' +
            // ' data="Common/MPW_Player_R2/mpw_player.swf" ' +
            // ' width="600" height="490" id="flvplayer" ' +
            // ' style="visibility: visible;  display: block !important;">' +
            //                            '<param name="allowfullscreen" value="true">' +
            // '<param name="play" value="true" /> ' +
            //                            ' <param name="flashvars"' +
            // 'value="flv=' + url + '&autoplay=true"></object>' +
            // '<div class="flc-panel" title="Click to load Flash content" style="width:' + '600; height: 490; top: auto; left: auto; display: none' +
            //                            '!important;"></div>',
            'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
            'onClosed': function () { $("#fancybox-inner").empty(); }
        });
        return false;
    });


 });

不設player中長寬才可符合不同縮放比例的螢幕大小