Add text function to jquery slideshow?

JavaScript
41

I have put your code together like this but it its still not pageing


$(function () {
    function pagerHandler() {
    var slide = Number(this.innerHTML - 1);
    $('#slideshow').cycle(slide);
    return false;
}

$('#slideshow').children().each(function (i) {
    $('<a>', {
        href: '#',
        text: i + 1,
        click: pagerHandler
    }).appendTo('#pager');
});
});
42

I’m looking at JQuery Cycle Plugin - ‘updateActivePagerLink’ Demo and it’s not showing the updated code. Have you uploaded the updated code?

43

its updated now

44

The slideshow section is positioned in front of the pager section, as if separate layers are involved.

You can either move the pager to some other location, such as above the slideshow, or use CSS to affect the page so that the two different sections don’t overlap. Or if you want to keep the pager where it currently is, you can use z-index to bring the pager forward in front of the slideshow section, so that the pager can then accept click events.

45

I have tried z-index but cant get it to work, do I have add this css to the function somehow?

I can send it back to hide it but I cant bring it forward

46

No, you should use CSS to achieve that.

When you investigate the rendered page, you’ll see that the cycle plugin sets the slide to a z-index of 8. So, you’ll want to set a z-index of something greater than 8 to the pager if you want to interact with the pager that’s in the same place as the slide.


.pager {
    ...
    z-index: 10;
}
47

Thanks Paul that fixed it.

I hope the previous next arrows are a lot easier

48

Good one.

By the way, you should know that you can use CSS styles to make the numbered pager links look a lot prettier. Space them out, with borders, or other aspects like that.

They are. See the example at intermediate demos 2 page.
It’s just a couple of links, or buttons if you like, which you refer to from the cycle properties.

49

Thanks for your help Paul, you were right the last one was easy.

All I had to do was change id of the function from #s2 to #slideshow to match up with the current slideshow and it worked like a charm

here is the final page for anyone that might be interested

JQuery Cycle Plugin - ‘updateActivePagerLink’ Demo

50

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

51

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.

52

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');
    });
};
53

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.

54

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

55

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.

56

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

57

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

58

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.

59

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?

60

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