Hi there,
I'm looking to do the same sort of thing ---- I don't need the dynamic
list functionality but the var with a custom startPlace is exactly
what I'm looking for.
I have the .active class in place, problem that I'm getting is that
after the page reloads, the carousel isn't auto-scrolling to the image/
thumbnail with the .active class. Even though it's 'highlighted' with
a css class, it still starts at the very beginning of the slideshow.
Thoughts?
On May 6, 10:49 am, Mimi <marie.thac...@gmail.com> wrote:
> I have a dynamicjCarouselwhich 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
> usingjcarousel*/
> 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="jcarouseljcarousel-skin-tango">
> </ul>
> </body>
