Add text function to jquery slideshow?

JavaScript
61

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.

62

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

63

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.

64

How would I achieve this? with a conditional statement?

65

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.

66

Pardon?

67

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

68

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.

69

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

Not tabs, the numbered pager code.

70

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

71

Thank you Paul, I think I have it working now

JQuery Cycle Plugin - ‘updateActivePagerLink’ Demo

72

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() { 
    .........
    .........
}:
73

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