投資、科技、生活


5分鐘就讓網誌加上照片自動輪播功能

增加 Blogger 網誌照片、圖片自動輪播效果

照片、圖片自動輪播 (image slider) 能提高網頁、網誌的吸引力,讓內容看起來更專業、提高點擊率,跟著下面的簡單程序,5 分鐘就能輕鬆的讓網誌、部落格增加這個專業的功能!


《 4 張圖片輪播的 demo 》





1. 備份網誌

新增任何網誌的版面配置或修改主題,請先記得備份目前正常運作的設定喔!

  • 登入網誌後,到左上方的主選單選取向下點選「主題」


  • 點選備份之後,選擇要備份的位置跟檔案名稱


  • 將原本運作正常的主題儲存備份完成後,就可以著手開始加入照片輪播功能了!

2. 增加 jQuery 插件

圖片輪播功能需要用到 jQuery 插件,非常容易、不用害怕,首先需要確認網誌的「主題」(Template) 是否已有相關設定,在 Blogger 主頁面選擇主題,之後點選「編輯 HTML」



進入 HTML 編輯頁面後,Mac 的話按 Command + F 鍵、Windows 的話 Control + F 鍵開啟搜尋對話框。

在搜尋對話框輸入"jquery.min.js",確認是否已經包含在主題 (Template) 內。

如果沒有的話將以下程式碼複製加到 </head> 之前

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"/>




3. 加上輪播功能的形式 style

增加圖片輪播功能,需要將以下程式碼複製到 </head> 之前

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />

接下來將以下的 CSS 格式設定程式碼,複製到主題的 ]]></b:skin> 之前

.bxslider img{
width:100%;
height:100%;
}
.bx-wrapper img{
display: inline !important;
}

有需要的可以調整上面的 width、height 來改變圖片尺寸


4. 加上需要的 script

搜尋 </head>,將以下的程式碼複製貼到 </head> 之前

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            pause: 50000,
 // in millisecond
            autoHover: true, // pause on hover
            autoControls: true,
            captions: false
        });
    });
</script>

需要的話可以修改上方程式碼的輪播功能參數

  • auto: true 代表自動輪播
  • pause: 5000 代表輪換週期為 5 秒
  • autoHover: true 代表滑鼠移到上方暫停輪播
  • autoControls: true 代表可以控制顯示上、下一張圖片
  • captions: false 代表不顯示圖片的標題

前述的動作完成後範本應該長的像下面這樣👇 (註:筆者因內嵌 Youtube 的設定,已經在別處設定了 jquery,所以步驟 2 的程式碼並未加在 </head> 之前)




實際呈現的效果

所有設定都已經完成,接下來就是在網誌的頁面上加上輪播的圖片,播放的圖片數量並無限制,進入文章編輯模式,切換到的 HTML 檢視模式


將以下的 HTML 程式碼加到文章內需要增加圖片輪播的位置,將 "ImageURL" 替換為圖片的網址,需要的話可以 ‘輸入圖片標題’ 或者留空。

<ul class="bxslider">
<li><img src="ImageURL1" title='輸入圖片標題' /></li>
<li><img src="ImageURL2" title='輸入圖片標題' /></li>
<li><img src="ImageURL3" title='輸入圖片標題' /></li>
<li><img src="ImageURL4" title='輸入圖片標題' /></li>
</ul>

如果要圖片能夠被點擊、連結到特定網頁,可以在 <img... /> 之前增加 <a href=..> 的敘述

<li><a href=“Your LINK"><img src=“IMAGE URL” alt=“ALT TEXT GOES HERE" /></a></li>

完成後就可以得到前面的輪播效果了~







0 comments