I'm working on a website that displays galleries, using jCarousel. But no matter what I try, I can't get it to work, and I need to finish this by today. I have a very urgent schedule. My code basically takes image URLs from a database and sends them to AJAX, which passes it to jCarousel which makes the gallery. But there are a few problems:
It doesn't display correctly! I can only get the last item pulled from the database, and it displays on the bottom-most row.
After the item pulled from the database is displayed, the first time I click on "prev" there's no scroll effect, and the item just disappears! Only if I click on "next" 2-3 times there's a scroll effect and the item remains visible.
My items are always displayed at the end
of the carousel!
This is urgent.. Please help me fix this.
about.html:
<!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',
wrap: "first",
initCallback: mycarousel_initCallback,
animation: 1000,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel2').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
wrap: "first",
initCallback: mycarousel_initCallback,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel3').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
scroll: 3,
wrap: "first",
initCallback: mycarousel_initCallback,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
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>
</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>
</body>
</html>
I commented the CSS because I thought it was giving me trouble, but honestly I have no idea what the hell's going on with jCarousel.
about.php:
<?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";
?>
Also, even if there are no other items than what is displayed, I'm still able to scroll back, but not forward, assumingly because my item is always placed at the end
of the carousel.
I know it looks like a lot
of code but it's really not! My formatting takes a lot
of lines, the commented CSS takes a lot, and a lot
of the code is HTML and jCarousel configuration, and there's also the BounceEasing effect which takes a few lines. There's not much actual code!
So as I said, this is urgent and I need this fixed. But I can't get it to work. Please help me!
Thanks for your time!
EDIT:
I changed the code a bit, but it still does not work. I really need help on this one!!
EDIT:
I added document.createElement("li"); to each while loop. Now all my items are displayed, but they are displayed vertically and not horizontally on each row. Other than that all other problems are the same.
EDIT:
Oh and also, in the row my image displays, only the image is there. Maybe jCarousel doesn't accept img and text, I don't know.
