Hi, a few time ago I posted a thread about a page in ajax/js/html that didn't work correctly. At first, I thought it was solved, but now I see it is not. I am trying to make a gallery using jCarousel, and it used to be very buggy until it was rewritten in jQuery. Now, everything works fine, except for one thing: The amount of images stays the same. Always the same. What I do is pass URLs from a php file, and I get them with ajax and pass to jCarousel. My jQuery code works fine, and it gets the correct image, but it always displays the same amount of images in the carousel. I tried 50 images, 20, 5, even a single image. Still the same. I really need this solved, so could you help me please?
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>
<link rel="stylesheet" type="text/css" href="./skins/tango/skin.css" />
<style type="text/css">
#wrapper {
position: relative;
width: 450px;
margin-left: auto;
margin-right: auto;
}
#carousel {
float: left;
width: 350px;
}
.carousel-ul {
width: 150px;
}
#controls {
margin-top: 5px;
}
#controls input {
cursor: pointer;
font-size: 11px;
}
#side {
float: right;
}
#side input.category {
width: 75px;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function mycarousel_initCallback(carousel) {
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
var carousels = $(".carousel-ul");
var prevButton = null;
$("input.category").click(function()
{
var el = this;
if (el === prevButton) { return; }
var url = "about.php";
var b = $(this).attr('value').toLowerCase();
var parameters = "?d=carousel&cat=" + b;
$.ajax(
{
url: url + parameters,
type: "POST",
success: function(data)
{
prevButton = el;
var i, index;
built = data.split(", ");
carousels.html('');
for (i=0; i<built.length; i++)
{
index = Math.floor(carousels.length * i / built.length);
carousels.eq(index).append($("<li>").append($("<div>").html(built[i])));
}
carousels.jcarousel({
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null,
initCallback: mycarousel_initCallback
});
},
error: function()
{
alert("Error reading file :" + url + "\nParameters : " + parameters);
}
});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="side">
<form name="cats">
<input type="button" value="Hats" class="category" /><br />
<input type="button" value="Pants" class="category" /><br />
<input type="button" value="Shirts" class="category" /><br />
</form>
</div>
<div id="carousel">
<ul class="carousel-ul jcarousel-skin-tango"></ul>
<ul class="carousel-ul jcarousel-skin-tango"></ul>
<ul class="carousel-ul jcarousel-skin-tango"></ul>
<div id="controls">
<input type="button" id="mycarousel-prev" value="Prev" />
<input type="button" id="mycarousel-next" value="Next" />
</div>
</div>
</div>
</body>
</html>about.php
echo "<img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, <img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, <img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, <img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, <img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, <img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />";
A big thanks to all helpers =]