facing error for jCarousel and Thickbox
the error is - "$ is not defined"
i got the code from jCarousel site for using with Thickbox but it is not working. i am not being able to find out the problem. so please help me to get the error. i am posting my full code
<%@ 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开发者_如何学JAVA.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>
You need to load thickbox after jquery has been loaded, and then put your js into the ready function.
Change this:
<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" />
To this:
<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" />
Also, you should put all of your javascript inside of the jquery ready statement:
jQuery(document).ready(function () {
// put ALL js in here
});
Put jquery references before the jcarousel references. Because Jcarousel uses the jquery library and... so Jquery needs to be instantiated first.
加载中,请稍侯......
精彩评论