COVID-19【新冠病毒、武漢肺炎】即時資訊:全球疫情台灣疫情
目前位置: 首頁 > ECSHOP響應式模版設計 > 讓首頁主廣告支援響應式模板

讓首頁主廣告支援響應式模板 超大 稍大 微大

發表於: 2020-07-24 最後更新: 現在時間:2020-11-25 07:26:02
不只是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());
您必須先 登入 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2020-11-25 07:26:02