Blogger 圖片輪播外掛 Camera 實作心得 (pCloud圖片外連)

jQuery圖片輪播外掛 Camera實作心得 (pCloud圖片外連)

Blogger網誌使用到現在，覺得最不方便的地方，就是文章撰寫時的圖片編輯。你只要一設定圖片靠左，Float的語法就自然幫你產生，圖片下方後續撰寫的文字就會開始文繞圖，排版整個成悲劇，如果想要一次貼很多張圖片，就得各種調整非常累人。

於是只好開始尋找有沒有更方便的貼圖效果，果不其然，在 WFU Blog 上挖到了 Camera 的這個外掛，各種試誤之後終於搞定，我的步驟大概如下：

首先先採用這篇文章的方法

jQuery 圖片輪播外掛﹍camera 安裝及使用詳解

自行到 Camera 官方網站下載程式 (點選右方綠色Code按鈕後，Download Zip檔案包)，然後上傳到我 pCloud 的外連Public資料夾裡 (這時候就覺得當初買終身真的是太值得了！)，並將以下程式碼安裝到後台HTML範本的 </head> 之前。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

<script src='你的外連路徑/jquery.mobile.customized.min.js'></script>

<script src='你的外連路徑/jquery.easing.1.3.js'></script>

<script src='你的外連路徑/camera.min.js'></script>

<link href='你的外連路徑/camera.css' rel='stylesheet' type='text/css' media='all'></link>

上面淺藍色的部分，請自行貼上你可供外部連結的空間裡 (例如我的就是pCloud)，這些檔案的直接連結。接下來再採用此篇文章的使用設定 (此為WFU Blog會員限定內容，請先加入)：
過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

根據我的網誌配色和需求，我刪除掉了縮圖和圖片連結，同時把過場畫面從隨機改成單一簡單過場，另外尺寸和圖片停留時間則沒有更動。

.


<!--jquery 圖片輪播 start-->
<div class="camera_wrap camera_azure_skin">
<div data-src="圖片1直接連結">
<div class="camera_caption fadeFromBottom">
圖說1</div>
</div>
  <div data-src="圖片2直接連結">
<div class="camera_caption fadeFromBottom">
圖說2</div>
</div>
  <div data-src="圖片3直接連結" >
<div class="camera_caption fadeFromBottom">
圖說3</div>
</div>
</div>
<script>
$('.camera_wrap').camera({
time: 3000,
height: '400px',
fx: 'overlay2',
pagination: true,
thumbnails: false
});
</script>
<!--jquery 圖片輪播 end, by WFU BLOG-->