I am attempting to build a page with multiple carousels, that by
default, only one displays.  When you click on an element on the page
(a staff members name), you see their own personal carousel, which
replaces the default.

When I attempt to do this, I receive the following error message:

"jCarousel: No width/height set for items. This will cause an infinite
loop. Aborting"

Code:

var $j = jQuery.noConflict();

$j(document).ready(function() {

        onLoad();

        $j('ul.usecarousel').jcarousel({
                visible: 5
        });

        $j('.gpic_wrapper').hide();
        $j('.gpic_wrapper#jamie').show();

        $j('a.teamnav').click(function()
        {
                $j('.gpic_wrapper').hide();
                $j('.gpic_wrapper#' + this.id).show();

                var currentPerson = this.id;

                $j("a.teamnav").each(function()
                {
                        if (this.id == currentPerson)
                                $j(this).addClass("selectedPerson");
                        else
                                $j(this).removeClass("selectedPerson");
                });
                return false;
                });
        });

I am linking to the appropriate jcarousel and skin.css, but if I take
a div class that surrounds one of the carousels and display: none; it,
and then resize my browser window, the alert error appears.

I have also adjusted my jcarousel pack and swapped

|loop|ol|infinite|an|ul|cause|will|This|items|set|No|jCarousel|alert|

with

|loop|ol|infinite|an|ul|cause|will|This|items|set|No|jCarousel|isNaN|

but still am having no luck.

I don't have a way to publish the page currently as it also involves a
google map, and the api key is set to my dev area only.

Thoughts?

Reply via email to