Using Jquery Jcarousel, I need help modifying the pagination

Question

First as a note I am using this plugin in a Rails app. Ok I need to do two things.

The first is that the pagination that I have working through:

 jQuery('.jcarousel-control a').bind('click', function() {
    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
    return false;
 });

needs to work without text. right now if I run a basic loop:

<%  ([email protected]).each do |n| %>
<a href="#"><%= n %></a>
<% end %>

It prints 3 numbers (I have three projects available to the loop), 1 2 3. Inside the links those numbers work for navigating between the projects. But I would like to replace the number with a graphic:

<a href="#"><%= image_tag 'empty_circle.png' %></a>

that way there is a graphical representation of the pagination. Is there a way to change the javascript to accept a non-numbered/image for pagination?

The second thing I need to do is create a "current" css rule, where if its current it would load a different image

<a href="#"><%= image_tag 'full_circle.png' %></a> . 

thanks for any help you can provide. I am pretty new to rails and other than plug and play I am very new to js and jquery.

Answer 1

Don't have time to write it out but one way of doing this might be something like:

• Change the main jquery selector to point to the image.
• Change the jquery page number to point to something like the link rel tag wrapping the image instead of its "text".
• Load the page number into the rel tag with PHP (or manipulate it with jquery, depending on what you need) from which it is then read.
• Put the different pagination images into a single large "imagemap" and use jquery to move the background position to the one you need. This way all those images get loaded on first page load and you don't need to fetch anything or hide the images. You need to add this line into your jquery function when the click takes place.

Hope that makes sense/helps.