Question

I know that you can set various callbacks for certain actions, but I need to get at the pager links that get created on the fly. I want to drop dynamic images into those links using innerHTML, but if I call it onload it obviously won’t work because the links haven’t been created yet.

There doesn’t seem to be a native “callback” function you can set for jQuery cycle. Am I missing it? Is there a way to do it even if the plugin doesn’t provide it natively?

Thanks!

Answer 1

There are a number of things here.

Firstly, you can specify where the paging options are displayed using the ‘pager’ option passed to cycle – $(‘#myelement’).cycle({pager: ‘#mypagerdiv’}). This will allow you to find them in jQuery later ($(‘#mypagerdiv a’), for example).

Secondly, there are a multitude of callbacks available for cycle, which can be found in the options object documentation here: http://jquery.malsup.com/cycle/options.html

You are probably most likely to be interested in the following: pagerAnchorBuilder

You would use it as follows: $(‘#mycyclediv’).cycle({ pagerAnchorBuilder: %yourfunction%})

Using this, you can build your own pager controls, and a small selection of examples of how to do this can be found on the jQuery cycle website:

jquery.malsup.com/cycle/pager2.html

jquery.malsup.com/cycle/pager3.html

jquery.malsup.com/cycle/pager7.html

jquery.malsup.com/cycle/pager11.html

This should allow for the functionality you need.

However, if you wish to change these dynamic images when slides are changed, then you can make use of the ‘before’ and ‘after’ callbacks, which are triggered before and after a slide transition occurs, respectively.

If you have any further questions, don’t hesitate to get in touch, although I’ve found that the jQuery cycle documentation is quite extensive, and the “Intermediate demo 2” should give you a helpful nudge in the right direction re callbacks.

(I’m a new user here, so can’t post more than one hyperlink, so sorry for above URLs)