【Blogger】Basic jQuery Slider

關於jQuery的技術似乎還沒有很多人在網路上提起,也找不太到關於這方面資訊的部落格文或是技術解答,但是可以在國外找到大量關於jQuery Slider或是其他應用層面的發展,前些日子在架設協作平台的時候就想要使用Slider來增加一下網頁的互動性,google大神馬上就賞賜給我許多jQuery Slider的英文安裝說明。

值得一提的是有一個叫做nivo slider似乎和Wordpress過往甚密,所有新版本都可以在官網找到wordpress的支援版本,身為blogger的使用者真的是很羨慕,而nivo slider也有Drupal和Joomla的套件支援,至於blogger就要自行把檔案寫入後台的html裡面才能應用。不過因為是『Basic』 jQuery Slider,所以沒有跟部落格裡的文章結合是這套的小缺憾,就拿來當當一般的照片輪播widget。

這篇使用說明來源是源自於國外的jQuery Slider開發者,
原始網站http://basic-slider.com/
網站原始程式碼https://github.com/jcobb/basic-jquery-slider/

引入jQuery Library,啟動plug-in
兩個.js檔案可以從作者提供的github直接使用,如果覺得不放心,還是要有一份屬於自己的檔案,把它下載下來看要放在googlesite的檔案櫃還是其他提供code存放服務的網站就由看官決定囉~.js檔下面的code是用來啓動slider的參數,有寬度和高度還有控制slider的頁數和輪轉,選用true打開或是用false來關閉,而這兩個部分要放在blogger後台的html的<head>裡面。
 <script src="js/libs/jquery-1.6.2.min.js"></script>  
 <script src="js/basic-jquery-slider.js"></script>  

 $(document).ready(function(){  
   $('#my-slideshow').bjqs({  
     'width' : 940,  
     'height' : 340,  
     'showMarkers' : true,  
     'showControls' : true,  
     'centerMarkers' : false  
   });  
 });  

設定ccs樣式
這個部分的來源在作者提供的github-ccs,不太需要做其他變更,把這部分的code貼在<b:skin>裡就可以了。
 ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}  
 li.bjqs-slide{display:none;position:absolute;}  
 ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}  
 ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}  
 ol.bjqs-markers li{float:left;}  
 p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}  

安裝gadget
在blogger版面配置介面新增小工具HTML/JavaScript,然後<li>填入你要slide的內容。
例如:<li><img title="圖片說明" src="圖片來源"/></li>
 <div id="my-slideshow">  
   <ul class="bjqs">  
     <li><!-- Any content you like --></li>  
     <li><!-- Can go inside these slides--></li>  
   </ul>  
 </div>  

好了,大功告成。

這個網誌中的熱門文章

【Google Site】iframe簡單嵌入.swf

【Google Site】用html小工具做出marqueer效果