|
(轉(zhuǎn))自定義ECShop的Flash輪播圖片樣式
ECShop默認(rèn)的的Flash輪播圖片（首頁主廣告）樣式有以下幾種， 那么怎么樣自定義個(gè)性化的flash輪播呢？
以上幾個(gè)flash播放器對(duì)應(yīng)的位置分別是/data/flashdata下的：default、dynfocus、prinkfocus、redfocus 隨便打開其中一個(gè)文件夾可以看到有四個(gè)文件：cycle_image.js、data.js、preview.jpg、*.swf
現(xiàn)在開始定制自己的播放器。復(fù)制其中一個(gè)文件夾，比如說redfocus，重命名為：zbird 然后開始修改zbird文件夾下的文件。 1，修改cycle_image.js 文件開頭的注釋修改為： /* $importjs不用修改。 將function show_flash()中出現(xiàn)redfocus的地方替換為zbird： document.getElementById('flash_cycle_image').innerHTML = ' <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ total_height +'">'+'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="data/flashdata/redfocus/redfocus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">'+'<param name="menu" value="false"><param name=wmode value="opaque">'+'<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'+'<embed src=\'#\'" /flashdata/redfocus/redfocus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'&stop_time=6000" quality="high" width="'+ focus_width +'" height="'+ total_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent"/>'+'</object> '; 2，data.js不用修改，在ecshop后臺(tái)切換播放器樣式的時(shí)候，程序會(huì)把上傳的圖片信息寫入到data.js中供播放器調(diào)用。 3，preview.jpg是播放器的預(yù)覽圖，在后臺(tái)供用戶點(diǎn)擊以選擇播放器樣式，可用本文開頭那張圖。 4，zbird.swf：刪除復(fù)制來的redfocus.swf，你需要更酷的，我用這是這個(gè)（zbird），當(dāng)然你不一定非要用這個(gè)。 來到后臺(tái)，系統(tǒng)設(shè)置->首頁廣告管理，可以看到新增加的播放器樣式已經(jīng)出來了：
選中zbird樣式為當(dāng)前樣式，這時(shí)到首頁刷新頁面，falsh并不顯示。 這時(shí)要修改模板里面library/下的index_ad.lbi文件，它是控制flash slide顯示的庫文件，只保留如下內(nèi)容即可： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 現(xiàn)在刷新首頁就可以看到新的flash slide樣式了。 還沒完。修改輪播圖片地址和鏈接后再刷新首頁發(fā)現(xiàn)flash slide里的內(nèi)容并沒有改變。因?yàn)閒lash slide讀取的是data.js里的內(nèi)容，說明data.js里的內(nèi)容并沒有改變。經(jīng)過分析可以知道，在切換樣式時(shí)（即在點(diǎn)擊要切換的flash slide樣式的時(shí)候）程序會(huì)把新的數(shù)據(jù)寫入到data.js中。顯然，在切換成zbird樣式時(shí)，新建目錄zbird下的data.js并沒有被寫入新的數(shù)據(jù)。那么，現(xiàn)在跟蹤程序看切換樣式時(shí)發(fā)生了什么。“首頁主廣告管理”的鏈接是：/admin/flashplay.php?act=list，打開flashplay.php發(fā)現(xiàn)list動(dòng)作display的是flashplay_list.htm模板文件。打開/admin/templates下的flashplay_list.htm找到47行： <td>{if $flashtpl.screenshot}<img src=\'#\'" border="0" style="cursor:pointer" onclick="setupFlashTpl('{$flashtpl.code}', this)" />{/if}</td> 可見當(dāng)樣式快照被點(diǎn)擊時(shí)觸發(fā)了setupFlashTpl()函數(shù)。在flashplay_list.htm的82行，可以看到function setupFlashTpl的實(shí)現(xiàn)，核心語句如下： Ajax.call('flashplay.php?is_ajax=1&act=install', 'flashtpl=' + tpl, setupFlashTplResponse, 'GET', 'JSON'); 那再到flashplay.php中insall的實(shí)現(xiàn)過程。284-314行是install動(dòng)作的實(shí)現(xiàn)過程，點(diǎn)擊樣式快照時(shí)執(zhí)行的操作。注意第296行： if (set_flash_data($flash_theme, $error_msg)) set_flash_data()函數(shù)功能顧名思義就是設(shè)置flash的數(shù)據(jù)。再跟蹤到set_flash_data()的實(shí)現(xiàn)，flashplay.php的860行開始，檢查以下代碼： switch($tplname) 可以發(fā)現(xiàn)如果切換到系統(tǒng)自工帶的幾個(gè)樣式：redfocus、pinkfocus、dynfocus時(shí)都執(zhí)行了set_flash_focus()函數(shù)，那么我們新建的zbird也是同樣道理。修改set_flash_data()如下 ： switch($tplname) 其實(shí)就是讓程序?qū)崿F(xiàn)切換到zbird樣式時(shí)也執(zhí)行set_flash_focus()函數(shù)。 再到刷新首頁就可以看到flash slide已經(jīng)和后臺(tái)修改的數(shù)據(jù)對(duì)應(yīng)了。
總結(jié)： 1，在/data/flashdata/下新建目錄（或直接復(fù)制自 redfocus文件夾），如名為zbird，里面包含四個(gè)文件：cycle_image.js、data.js、preview.jpg、zbird.swf。 2，修改新建的樣式目錄下的文件：修改cycle_image.js（如：把cycle_image.js中的出現(xiàn)的redfocus替換為zbird）、替換preview.jpg為相應(yīng)樣式的快照、找來自定義flash樣式的swf文件（如：zbird.swf）。 3，修改庫文件/themes/模板名/library/index_ad.lbi，去掉所有if判斷。 4，修改flashplay.php文件，找到set_flash_data()函數(shù)，在大概878行加上：“ case 'zbird': ”。
|
|
|
