3

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...

Ronald Wildschut
  • 417
  • 4
  • 8
  • 19
  • See some debugging console, you have errors in your javascript... "Uncaught Error: Syntax error, unrecognized expression: [href=http://different-agency.com/site/gallery/]" – XCS Feb 13 '12 at 10:58
  • @christy... I know, but no idea why it should work with the normal link and not with the ajax page call link... – Ronald Wildschut Feb 13 '12 at 11:05
  • As long as there are erros in the javascript console, the whole javascript on the site will not work. We can't help you unless you post some code. Paste here the code that you change that makes the script stop working. – XCS Feb 13 '12 at 11:30
  • @christy... that's just the problem I don't know what the wrong or right code is... The only thing I know is that there are no javascript errors If I open the first link I Mentioned in my post and not in the 2nd...Somewhere there is something which breaks it.. – Ronald Wildschut Feb 13 '12 at 11:51
  • Obviously something breaks it, but if you DON'T post any code, we can't help you. – XCS Feb 13 '12 at 12:47
  • Ive had problems like this myself. When you are loading images dynamically like this plugin doesnt know how to size them because it is being loaded before the images are. – RonnyKnoxville Feb 13 '12 at 13:05

2 Answers2

1

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.

RonnyKnoxville
  • 6,166
  • 10
  • 46
  • 75
1

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.

RonnyKnoxville
  • 6,166
  • 10
  • 46
  • 75
  • @JackalopeZero... 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... – Ronald Wildschut Feb 15 '12 at 07:01
  • So this works but you have to resize the browser to get the carousel to display properly?? I just checked the non working example again and they seem to display correctly, is this where you are testing the code still? – RonnyKnoxville Feb 15 '12 at 09:29