CODEWITHSUNDEEP
jqueryjcarousel
Ronald Wildschut
Ronald Wildschut

Reputation: 417

jQuery Carousel not working as intended

I have implemented a jQuery carousel on a wordpress website with AJAX page requests. Now the carousel is working on this page:

working gallery

But not when opening the page with an AJAX request.

not working gallery

How can I fix this problem?

I'm getting some javascript errors

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

Which is strange because with the normal link it is working as it should..

This is the code to call the carousel

 <script type="text/javascript">
  jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular'});
  jQuery('ul#about-jcarousel li').width(234);
</script>

edit: Problem is kinda solved by adding the script to call the carousel into the js file which initiates the ajax page load. It is working now, but somehow the images are shown on top of each other and by resizing the browser the are displayed perfectly....strange...

Upvotes: 3

Views: 2343

Answers (2)

RonnyKnoxville
RonnyKnoxville

Reputation: 6404

As I said previously, the images are being loaded after the carousel, so the carousel thinks it has no images to load when it is called.

You can test this by opening the firebug console and running:

jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular'});

in the command line. This makes the carousel work.

I dont know how you are loading these images, but my suggestion would be to make an ajax call from your javascript when the page is loaded to GET the images.

Something such as:

jQuery(document).ready(function() {

jQuery.ajax({
            url: '/view/getImages',
            type: 'GET',
            dataType:"json",
            contentType: 'application/json',
            success: function (data){
                if (data.errorMsg){
                    alert(data.errorMsg);
                }else{
                    for( i=0; i < data.images.length; i++)
                    {
                        jQuery('ul#about-jcarousel').append(li).append('<img src='+data.images[i]+'/>')
                    }
                    jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular', itemFallbackDimension: 234});
                }
            }
       });
}

There are probably easier ways of doing it, such as using a callback function on whichever function is loading your images. If you are using a framework to load them this may not be possible though, so this is the only answer I can give you that will work.

Upvotes: 1

RonnyKnoxville
RonnyKnoxville

Reputation: 6404

It looks like you may not be passing the image links properly:

Syntax error, unrecognized expression: [href=http://different-agency.com/site/gallery/]

Im guessing you shouldnt have the brackets of the array in the syntax, especially without containing quotation marks.

Upvotes: 1

Related Questions