不只是ECShop的購物平台而是所有有使用Flash的網頁都被瀏覽器預設封鎖了,雖然在PC上可以手動允許播放,但對管理者或用戶來說都是一種困擾,每次進入網站都會看到那黑黑的一塊,於是有人把它換成了靜態圖片,或動態的GIF圖片
除此之外,OwlCarousel2是一個不錯的圖片輪播JS外掛,完整自適應版面(RWD)、支援多種特殊輪播模式(例如由右到左、不同尺寸圖片輪播、滑鼠拖拉效果…等)、可一次輪播數張圖片、Youtube 影片、動畫、可自訂循環輪播、輪播時間、速度、免費,並可商業使用...
一、官網下載 OwlCarousel2
二、這個外掛需要依賴jquery,而ecshop的transport.js確與jquery衝突,因此你的ecshop若不支援jquery,首頁就不能載入transport.js,否則無法正常顯示...以ecshop為例,請將index_ad.lbi內容清空並重新編輯:
三、接下來設定輪播選項,每次只顯示一張,若是想每次顯示三張只需將 items: 1 改成 items: 3 即可
除此之外,OwlCarousel2是一個不錯的圖片輪播JS外掛,完整自適應版面(RWD)、支援多種特殊輪播模式(例如由右到左、不同尺寸圖片輪播、滑鼠拖拉效果…等)、可一次輪播數張圖片、Youtube 影片、動畫、可自訂循環輪播、輪播時間、速度、免費,並可商業使用...
一、官網下載 OwlCarousel2
二、這個外掛需要依賴jquery,而ecshop的transport.js確與jquery衝突,因此你的ecshop若不支援jquery,首頁就不能載入transport.js,否則無法正常顯示...以ecshop為例,請將index_ad.lbi內容清空並重新編輯:
<link href="{$themes}css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all" /> <link href="{$themes}css/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="{$themes}js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="{$themes}js/owl.carousel.min.js"></script>{$themes}是目前的模板目錄
三、接下來設定輪播選項,每次只顯示一張,若是想每次顯示三張只需將 items: 1 改成 items: 3 即可
<script type="text/javascript"> $(window).load(function() { $(".owl-carousel").owlCarousel({ loop: true,/*是否循環*/ margin: 10, autoplay: true,/*是否自動播放*/ autoplayTimeout: 3000,/*換圖間隔*/ autoplayHoverPause: true,/*滑鼠經過是否暫停*/ nav: true, // 顯示導航文字 navText : ['上一張','下一張'],// 顯示導航文字 dots: false, //顯示圓點導航按鈕 smartSpeed: 800,/*換圖速度*/ items: 1//每次顯示一張 }); }); </script>四、如果將上面的 items: 1 換成下方的代碼,可以讓OwlCarousel2根據設備的寬度顯示不同張數,以下方為例,0~600px顯示一張,600px~1200px顯示兩張,1200px以上則顯示三張,這樣做的好處可以讓圖片以最小尺寸顯示,不必考慮大小螢幕問題...
responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1200:{ items:3 } }五、加入要輪播的圖片,ecshop是跑smarty迴圈的,所以會像這樣
<div class="owl-carousel"> <!--{foreach from=$focus item=playerdb name=get_flash_xml}--> <div class="item"> <a href="{$playerdb.url}" title="{$playerdb.text}"><img src="{$playerdb.src}" /></a> </div> <!--{/foreach}--> </div>六、最後在 index.php 最後加入底下函數才能順利讀取輪播列表,如果沒有意外應該能正常顯示輪播圖片了
if (!function_exists('get_focus')){ //首頁主廣告 function get_focus(){ $flashdb = array(); if (file_exists(ROOT_PATH . DATA_DIR . '/flash_data.xml')) { if (!preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"\ssort="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER)) { preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER); } if (!empty($t)) { foreach ($t as $key => $val) { $val[4] = isset($val[4]) ? $val[4] : 0; $flashdb[] = array('src'=>$val[1],'url'=>$val[2],'text'=>$val[3],'sort'=>$val[4]); } } } return $flashdb; } } $GLOBALS['smarty']->assign("focus",get_focus());