jQuery Cycle Plugin的consolelog的一個問題

jQuery Cycle Plugin應該很多人都用得很習慣了。只要是想要做幻燈片效果的,或是圖片動畫特效,一般來講我只會想到jQuery Cycle Plugin或是fancybox這兩種。jQuery Cycle Plugin算是非常好上手,步驟最簡單的不超過3步驟,就能達到效果:

  1. link css跟js檔案 
  2. 貼上javascript
  3. 加上要輪播照片的div 跟id   img標籤。


先來個jQuery Cycle Plugin的連結 http://jquery.malsup.com/cycle/

然而今天再練習套用jQuery Cycle Plugin的時候發現了一個bug,關於圖片的bug,這個標題很難下,但說不定只有我有這個問題?!,看到這個問題還蠻訝異的,之前套用這個效果非常成功,但今天重新套用卻出了問題,在我的chrome console log 出現了[以下]這樣的問題。


[cycle] 1 - img slide not loaded, requeuing slideshow: http://127.0.0.1/myweb/images/20110914-03.jpg 0 0
行數 :/myweb/js/jquery.cycle.all.latest.js:28

了解一下整個html檔的狀況:
  • 先來一段<head>標籤之前的內容:
<html>
<head>
<title>練習</title>

<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<!-- include Cycle plugin -->

<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('#slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...source:http://jquery.malsup.com/cycle/basic.html
    });
});
</script>

</head>

這段內容都沒有問題
首先一定要匯入jQuery.js <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
再來要匯入jQuery Cycle Plugin的js<script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>

然後貼上javascript

$(document).ready(function() {
    $('#slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...source:http://jquery.malsup.com/cycle/basic.html
    });
});

id為slidshow的div區塊套用fade的這個特效。

  • 接下來來看div id="slideshow"的內容 :
<div id="container"> 
  <div id="slideshow">
  <img src="images/20110914-03.jpg" alt="照片slideshow"  />
  <img src="images/002.jpg" alt="照片slideshow"  />
  </div>
</div>

整個html頁面的程式碼如上,瀏覽時問題出現了,效果不但沒有起作用,而且還出現consolelog的問題:
順個這個log去看一下jquery.cycle.all.latest.js:28 第28行,很好,看不懂 = =
最後比對與之前做過的練習結果才發現問題在於img的width跟height的屬性,(當初還以為是圖片格式還是我的selector下錯。)

最後解決的方法是,被套用效果的該div標籤的img加上width="" 屬性跟 height=""屬性(其中一個有加就可以work),就可以運作了。

<img src="images/20110914-03.jpg" alt="照片slideshow"  />
<img src="images/002.jpg" alt="照片slideshow"  />

可運作code:

<img src="images/20110914-03.jpg" alt="照片slideshow" width="500" height="200"/>
<img src="images/002.jpg" alt="照片slideshow"  width="500" height="200"/>
//width跟height屬性,只要其中一個有就可以運作。

-end 

留言

這個網誌中的熱門文章

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android] 筆記 手機上測試自己的 APP

[Android 筆記] 設定 ImageView 的圖檔來源