I have a dynamic jCarousel which pulls in JSON data from php, and
prints out the list html.
What I'm trying to do is set the carousel start item as a variable,
which would find the item with the class ".active", and start with
that item. The problem is that since the data is dynamic when it
looks for the start item, the list hasn't yet been rendered, therefore
doesn't find any class or list data.
The code below works with a static list, but not dynamic. I think my
options are (a) wait for carousel to load, then somehow set the
"start" item after, or (b) after list loads auto-scroll to the item
with class ".active". Neither of which I know how to do. Or maybe
you have a better idea that i've missed?
Help please, I've exhausted all my ideas at this point, need some
help.
Here's the code i'm working with for the dyamic list:
------------------------------
<script language="javascript">
$(document).ready(function() {
/* create an image slideshow from a JSON array using jcarousel
*/
var itemLoadCallback = function(carousel, state) {
if (state != 'init') {
return;
}
jQuery.getJSON("json_output.js", function(data){
itemAddCallback(carousel, carousel.first,
carousel.last,
data.items);
});
};
var itemAddCallback = function(carousel, first, last, data) {
for (i = 0, j = data.length; i < j; i++) {
carousel.add(i, getItemHTML(data[i]));
}
carousel.size(data.length);
};
/* format the data in each li */
var getItemHTML = function(d) {
return '<div class="' +
d.active + '"><div class="lb-rank">' +
d.rank + '</div><div class="lb-photo"><a
class="' +
d.active + '" target="_blank" href="' +
d.profile_url + '"><img class="product"
alt="product photo" src="'
+
d.pic + '" border="0" /></a></div><div
class="lb-name"><div
class="lb-name-truncate"><a target="_blank" href="' +
d.profile_url + '">' +
d.name + '</a></div><h1>' +
d.score + '</h1></div><div class="lb-icons"><a
class="smack-
button" href="' +
d.smack_url + '><img src="../images/spacer.gif"
width="50"
height="45" border="0" alt="..." title="Send Smack Talk to this
friend" /></a></div></div>';
};
/* print out the carousel & custom config */
var container = $('#mycarousel'); //better call the whole thing
from
inside document.ready
var startPlace = $('a',container).index($('.active',container));
jQuery('#mycarousel').jcarousel({
itemLoadCallback: itemLoadCallback,
start: startPlace,
scroll: 3
});
});
</script>
</head>
<body>
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
</ul>
</body>
