2011-08-05 50 views
0

面對錯誤的錯誤是 - 「$沒有定義」爲的jCarousel和ThickBox的

我接到的jCarousel網站的代碼與ThickBox的使用,但它無法正常工作。我無法找出問題所在。所以請幫我解決這個錯誤。 我張貼我的全部代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Simple_JCarousel.aspx.cs" Inherits="Carousel.JCarousel.WebForm1" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="../Scripts/thickbox.js"></script> 
    <link rel="stylesheet" href="../Styles/thickbox.css" type="text/css" media="screen" /> 

    <script language="javascript" type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 
    <script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="../Styles/skin.css" /> 
<style type="text/css"> 

#mycarousel .jcarousel-item-placeholder { 
    background: transparent url(../images/JQNavBtn/loading-small.gif) 50% 50% no-repeat; 
} 

</style> 

<script type="text/javascript"> 

    // Set thickbox loading image 
    tb_pathToImage = "../images/img/loadingAnimation.gif"; 

    var mycarousel_itemList = [ 
    { url: "../images/1.jpg", title: "Flower1" }, 
    { url: "../images/2.jpg", title: "Flower2" }, 
    { url: "../images/3.jpg", title: "Flower3" }, 
    { url: "../images/4.jpg", title: "Flower4" }, 
    { url: "../images/5.jpg", title: "Flower5" }, 
    { url: "../images/6.jpg", title: "Flower6" }, 
    { url: "../images/7.jpg", title: "Flower7" }, 
    { url: "../images/8.jpg", title: "Flower8" } 

]; 

    function mycarousel_itemLoadCallback(carousel, state) { 
     for (var i = carousel.first; i <= carousel.last; i++) { 
      if (carousel.has(i)) { 
       continue; 
      } 

      if (i > mycarousel_itemList.length) { 
       break; 
      } 

      // Create an object from HTML 
      var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i - 1])).get(0); 

      // Apply thickbox 
      tb_init(item); 

      carousel.add(i, item); 
     } 
     ShowImage(); 
    }; 

    /** 
    * Item html creation helper. 
    */ 
    function mycarousel_getItemHTML(item) { 
     var url_m = item.url.replace(/_s.jpg/g, '_m.jpg'); 
     return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>'; 
    }; 

    jQuery(document).ready(function() { 
     jQuery('#mycarousel').jcarousel({ 
      size: mycarousel_itemList.length, 
      itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback } 
     }); 

     ShowImage(); 
    }); 

    function ShowImage() { 
     jQuery('#mycarousel img').mouseover(function() { 
      var img = '<img src="' + this.src + '" />'; 
      jQuery('#showImageArea').html(img); 
     }); 

    } 
</script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <ul id="mycarousel" class="jcarousel-skin-ie7"> 
    <!-- The content will be dynamically loaded in here --> 
    </ul> 

    </div> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    <div id="showImageArea"></div> 
    </form> 
</body> 
</html> 
+0

請正確格式化您的代碼併發布。這是一個眼睛疼痛。也有點智能,只粘貼相關的代碼。例如我沒有看到你在哪裏實例化傳送帶。你爲什麼要粘貼整個輪播代碼?我認爲這是一個插件,工作得很好。 – shashi

回答

1

認沽jQuery的引用在jcarousel引用之前。因爲Jcarousel使用jquery庫和...所以Jquery需要首先實例化。

2

您需要的jQuery已經被加載後加載ThickBox的,然後把你的JS進入就緒功能。

更改此:

<script type="text/javascript" src="../Scripts/thickbox.js"></script> 
    <link rel="stylesheet" href="../Styles/thickbox.css" type="text/css" media="screen" /> 

    <script language="javascript" type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 
    <script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="../Styles/skin.css" /> 

要這樣:

<script language="javascript" type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> 
    <script src="../Scripts/jquery.jcarousel.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="../Styles/skin.css" /> 
    <script type="text/javascript" src="../Scripts/thickbox.js"></script> 
    <link rel="stylesheet" href="../Styles/thickbox.css" type="text/css" media="screen" /> 

此外,你應該把所有的JavaScript的jQuery的準備語句的內部:

jQuery(document).ready(function() { 
     // put ALL js in here 
    });