add text function to jquery slideshow?

[paul_wilkins]

Oh there is one last thing, how do I add css for the active slide number so it stands out from the inactive one?

Well, in the mean-time you could add it to the updateActivePagerLink method, but I can't help but think that there may be a better solution.

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $([$(pager), $('#pager')]).each(function() {
        ...

A better way though may be to update the pagerAnchorBuilder method instead so that it can create both images and numbers, then to use CSS to disable the appearance of one or the other. That way, both #nav and #pager can then be referred to as being pagers in the cycle setup, and things automatically work as they should.

[WavyDavy]

Well, in the mean-time you could add it to the updateActivePagerLink method, but I can't help but think that there may be a better solution.

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $([$(pager), $('#pager')]).each(function() {
        ...

I have added this code but I still cant see any class or id in firebug that I can add a:active to.

What am I missing? You can see a link here

JQuery Cycle Plugin - 'updateActivePagerLink' Demo

and here is how I have used your code

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $([$(pager), $('#pager')]).each(function() {
        console.log(clsName + '; ' + currSlide ); 
        $(this).children().removeClass('activeLI').filter(':eq('+currSlide+')').addClass('activeLI');
    });
};

[paul_wilkins]

I have added this code but I still cant see any class or id in firebug that I can add a:active to.

There isn't on the initial page load due to the updateActivePagerLink code running long before the numbered pager even exists.
Once the image changes though, the class is there.

You can solve that by, and this shouldn't come as much of a surprise, by creating the numbered pager section first before the updateActivePagerLink is run by the cycle plugin.

[WavyDavy]

How do I add a current id selector for the current number slide?

[paul_wilkins]

How do I add a current id selector for the current number slide?

There is already one that exists on the current number, but only after the slide has changed.

To have it also appear when the page first loads, you need to create that numbered pager section first, before the cycle plugin uses the updateActivePagerLink function.

[WavyDavy]

I can see the active li class for the thumbnail pager but I cant see anything for the numbered pager

JQuery Cycle Plugin - 'updateActivePagerLink' Demo

[paul_wilkins]

I can see the active li class for the thumbnail pager but I cant see anything for the numbered pager

JQuery Cycle Plugin - 'updateActivePagerLink' Demo

On that different page, you are not using the code that in post #52 you said you were using.

[WavyDavy]

I thought I already put it in, must have put it into the wrong copy

Here it is again

JQuery Cycle Plugin - 'updateActivePagerLink' Demo

still cant see anything on the selected number which I can mark with css as being selected.

[paul_wilkins]

still cant see anything on the selected number which I can mark with css as being selected.

I see you have CSS for the activeLI in the #nav element, but what CSS are you using for the activeLI in the .pager element?

[WavyDavy]

firebug is not showing any activeLI class on any of the numbered anchors, what are you seeing that I am not?

[paul_wilkins]

firebug is not showing any activeLI class on any of the numbered anchors, what are you seeing that I am not?

Set up a class for .pager activeLI and you will see it:

}.pager activeLI {
    border: 1px solid black;
}

You've done something odd with the prev/next links by mixing them in with the pager, but that shouldn't be too tricky to resolve.

[WavyDavy]

The slideshow also seems break when moving from the thumb nav to the number nav and back to the thumbs activeLI nav

[paul_wilkins]

The slideshow also seems break when moving from the thumb nav to the number nav and back to the thumbs activeLI nav

There's also another problem, where you're misunderstood what to do.

To have it also appear when the page first loads, you need to create that numbered pager section first, before the cycle plugin uses the updateActivePagerLink function.

That does not mean to move the code throughout the page until it is visually above the other code.

It means instead that the script that creates the numbered pager section needs to be executed first, before the cycle plugin executes the updateActivePagerLink method.

[WavyDavy]

There's also another problem, where you're misunderstood what to do.



That does not mean to move the code throughout the page until it is visually above the other code.

It means instead that the script that creates the numbered pager section needs to be executed first, before the cycle plugin executes the updateActivePagerLink method.

How would I achieve this? with a conditional statement?

[paul_wilkins]

How would I achieve this? with a conditional statement?

No, by understanding what the code is doing.

Here's what you currently have:

$(function () {
    // pager handler, create tabs
});

$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
    ...
};
 
$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    ...
};
 
$(function() {
    // init cycle
});

The parts in the $(function() { sections are inside callback functions, which are delayed until the page exists, which is required for those parts of the code to run properly.

However, you also have updateActivePagerLink being defined twice. The first one will just be overwritten by the second, so you should completely remove that first one.

What is normally done is for all of the jQuery code to be placed inside a single callback function, so what you need to have instead with your code is this:

$(function () {
    ... pagerHandler
    ... create tabs

    $.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
        ...
    };
 
    ... init cycle code
});

After that, you need to add the CSS code so that you can see the effect that the activeLI is having on the numbered links, and to then reorganise the structure of that pager to fix a problem that the prev/next links are causing.

[WavyDavy]

I am sorry I am a little confused I cant see where in the code comments where it mentions anything about tabs?

[paul_wilkins]

I am sorry I am a little confused I cant see where in the code comments where it mentions anything about tabs?

Pardon?

[WavyDavy]

In the code blocks in your previous post you mention create tabs.

I cant see any function in the code on my page which does that.

[paul_wilkins]

I'm becoming exhausted by trying to help you understand this.

Not tabs, the numbered pager code.

[WavyDavy]

I am so sorry paul I am not trying to give you a hard time, its been seven years since I last looked at javascript

[WavyDavy]

Thank you Paul, I think I have it working now

JQuery Cycle Plugin - 'updateActivePagerLink' Demo

[WavyDavy]

I am almost there, I just have to try and figure out why the previous and next arrows are not updating the current slide number.

JQuery Cycle Plugin - 'updateActivePagerLink' Demo

This is the code I had

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $([$(pager), $('#pager')]).each(function() { 
    .........
    .........
}:

I changed it to this to try and fix the arrows but still not working, its not throwing up any syntax errors either so I am not sure where I went wrong

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $([$(pager), $('#pager, #prev, #next')]).each(function() { 
    .........
    .........
}:

[WavyDavy]

Would I have to create a whole new function to get the prev/next arrows to show the currently selected number