目前位置: 首頁 > ECSHOP響應式模版設計 > 讓首頁主廣告支援響應式模板

不只是ECShop的購物平台而是所有有使用Flash的網頁都被瀏覽器預設封鎖了，雖然在PC上可以手動允許播放，但對管理者或用戶來說都是一種困擾，每次進入網站都會看到那黑黑的一塊，於是有人把它換成了靜態圖片，或動態的GIF圖片

除此之外，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());

相關文章