圖片輪播增加播放影音檔功能
利用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中長寬才可符合不同縮放比例的螢幕大小