Need to customize jcarousel

Question

Hi all,

I'm using jcarousel to build a scrolling slideshow and need to make some customizations. There is a callback function that is referenced whenever an item becomes the last visible item in the carousel.

1. function mycarousel_itemLastInCallback(carousel, item, idx, state) {
          display('Item #' + idx + ' is now the last item');
      };

You can see how this works here. What I would like to do is change this function so that the display shows just a caption of the current image. I would think to put the caption data in the alt tag of each image, but then how would I access it? I have tried something like this inside the function:

var theimage=item.next(); var thetext=theimage.alt; display('thetext');

...which didn't work. I'm in over my head here! Hopefully someone will enlighten me.

Second thing is, the data appends itself to the previous data in the display box. I need each caption to replace the previous caption. Not sure how to do that either. Here is the piece of jcarousel code that controls this:

var row = 1; function display(s) { // Log to Firebug (getfirebug.com) if available //if (window.console != undefined && typeof window.console.log == 'function') // console.log(s);

      if (row >= 1000)
          var r = row;
      else if (row >= 100)
          var r = ' ' + row;
      else if (row >= 10)
          var r = '  ' + row;
      else
          var r = '   ' + row;

      jQuery('#display').html(jQuery('#display').html() + r + ': ' + s + '<br />').get(0).scrollTop += 10000;

      row++;
  };

Any help is super appreciated! Thanks

Answer 1

Firstly, you probably should consider using attr('alt') to access attributes of an element.

After that, if you look at the display() method it accepts a string. If you need it to display the variable called thetext, then your syntax is incorrect, you want something like:

var thetext= $(image).attr('alt'); display(thetext);

In your sample the line:

var theimage=item.next();

means that 'theimage' is probably already a jquery wrapped html element. If that's the case:

var thetext= image.attr('alt'); display(thetext);

Beyond that, I'd personally need to see an example web page. Setup up a page on jsfiddler.net and put the link back here if you're still stuck