I'm using jCarousel to create this multi-row slideshow and..well... It doesn't work. I really don't know why, and this is very urgent. I have less than an hour to finish it. Please, please help me.
main page:
<!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" xml:lang="en-us">
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
<style type="text/css">
#wrapper
{
width: 700px;
margin-left: auto;
margin-right: auto;
}
#carousel
{
margin-top: 120px;
padding-left: 120px;
}
#side
{
padding-left: 550px;
position: absolute;
padding-top: 120px;
}
#hidden
{
color: #FFFFFF;
}
</style>
<script type="text/javascript">
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d)
{
if ((t/=d) < (1/2.75))
{
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75))
{
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75))
{
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else
{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};
function mycarousel_initCallback(carousel)
{
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
easing: 'BounceEaseOut',
initCallback: mycarousel_initCallback,
animation: 1000,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel2').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
initCallback: mycarousel_initCallback,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel3').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
scroll: 3,
initCallback: mycarousel_initCallback,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
</head>
<body>
<span id="hidden"> </span>
<div id="wrapper">
<div id="side">
<form name="cats">
<input type="button" value="Hats" onclick="getObject('hats', this);"/><br />
<input type="button" value="Pants" onclick="getObject('pants', this);"/><br />
<input type="button" value="Shirts" onclick="getObject('shirts', this);"/><br />
</form>
</div>
<div id="carousel">
<ul id="mycarousel" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel2" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel3" class="jcarousel-skin-tango">
</ul>
<input type="button" id="mycarousel-prev" value="prev" />
<input type="button" id="mycarousel-next" value="next" />
</div>
</div>
<script type="text/javascript">
var prevButton = null;
function getObject(b, el)
{
var currbutton = b;
var http;
var url = "about.php";
var parameters = "d=carousel&cat=" + currbutton;
try
{
http = new XMLHttpRequest();
}
catch(e)
{
try
{
http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getServer()
{
if (http.readyState == 4)
{
var i = 0;
var liArr = http.responseText;
var built = liArr.split(", ");
var li = document.createElement("li");
var ul1 = document.getElementById("mycarousel");
var ul2 = document.getElementById("mycarousel2");
var ul3 = document.getElementById("mycarousel3");
if (el != prevButton)
{
prevButton = el;
while (ul1.hasChildNodes() ) {ul1.removeChild(ul1.lastChild);}
while (ul2.hasChildNodes() ) {ul2.removeChild(ul2.lastChild);}
while (ul3.hasChildNodes() ) {ul3.removeChild(ul3.lastChild);}
}
else
return 0;
while (i < (built.length) / 3)
{
li.innerHTML = built[i];
ul1.appendChild(li);
i++;
}
while (i < ((built.length) / 3)*2)
{
li.innerHTML = built[i];
ul2.appendChild(li);
i++;
}
while (i < (built.length))
{
li.innerHTML = built[i];
ul3.appendChild(li);
i++;
}
}
}
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = getServer;
http.send(parameters);
}
</script>
</body>
</html>php(only contains a test string)
<?php
echo "<img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, hi, hi, hi, hi, hi, hi, hi, hi";
?>I just put some random "hi"s in the php file, and a link to a picture, to see how it works.
Few problems:
I only get one part of the string echoed in the php(the last "hi"), and it's in the bottom-most row
2. Whenever I click on "next", jCarousel "pushes" the "hi" somewhere and all I can see is it's bulletin(the black dot). It is behaving really weird!!
I really need help on this one.
I know the main page looks like a lot of code to check but really it's not a lot. Most of it is from my indentation, and half of it is just HTML. There's not a lot of code to check.
So, if you know what's wrong, please post here quickly. Thanks!!
