Multiple rows with jcarousel

Question

I'm trying to use jcarousel to build a container with multiple rows, I've tried a few things but have had no luck. Can anyone make any suggestions on how to create it?

Answer 1

What is the code you have tried? I'm thinking it will require an extension or modification to jCarousel.

Answer 2

Hi,

We have had to make a similar modifiaction. We do this by extending the default options, to include a rows value, and the width of each item (we call them modules) then divide the width by the number of rows.

Code added to jCarousel function...

Add to default options:

moduleWidth: null, rows:null,

Then set when creating jCarousel:

$('.columns2.rows2 .mycarousel').jcarousel( { scroll: 1, moduleWidth: 290, rows:2, itemLoadCallback: tonyTest, animation: 'slow' });

The find and edit the lines in: $.jcarousel = function(e, o) {

if (li.size() > 0) { ... moduleCount = li.size(); wh = this.options.moduleWidth * Math.ceil( moduleCount / this.options.rows ); wh = wh + this.options.moduleWidth;

this.list.css(this.wh, wh + 'px');

// Only set if not explicitly passed as option if (!o || o.size === undefined) this.options.size = Math.ceil( li.size() / this.options.rows );

Hope this helps,

Tony Dillon

Answer 3

you might want to look at serialScroll or localScroll instead of jcarousel.

Answer 4

Hi Sike

I'm having trouble with getting the 2 rows to work. Could you please post the HTML you used?

I did the changes to the jquery file but nothing changed.

I even deleted:

    if (li.size() > 0) {
                var wh = 0, i = this.options.offset;
                li.each(function() {
                    self.format(this, i++);
                    wh += self.dimension(this, di);
                });

                moduleCount = li

.size();
      wh = this.options.moduleWidth * Math.ceil( moduleCount / this.options.rows ); 
      wh = wh + this.options.moduleWidth;

      this.list.css(this.wh, wh + 'px');

            // Only set if not explicitly passed as option
            if (!o || o.size === undefined)
                this.options.size = Math.ceil( li.size() / this.options.rows );
        }

Even with this deleted it did not change the jcarousel..

Answer 5

Hey Tony, Can you provide an example of your HTML? I'm currently looking at extending the jcarousel to include rows as well however with just changing the width of the container you have the modules lining up as: ABCD EFGH ...and we would want it as ACEG BDFH

Thoughts?

Answer 6

I found this post on Google Groups that has a working version for multiple rows. I have used this and it works great. http://groups.google.com/group/jquery-en/browse_thread/thread/2c7c4a86d19cadf9