Add text function to jquery slideshow?

JavaScript
1

Hi,
I have found a jquery plugin that does exactly what I want it to do except for one thing. It doesnt display a text description underneath the full size image.

JQuery Cycle Plugin - ‘updateActivePagerLink’ Demo

I dont have much experience with javascript which is why I am using jquery. I was hoping someone could point me towards a function that I can add to this script or help me write one from scratch.

Any help would be much appreciated:)

Here is the snippet of code for the jquery slideshow I am using

// redefine Cycle's updateActivePagerLink function 
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
    $(pager).find('li').removeClass('activeLI') 
        .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
}; 
         
$('#slideshow').cycle({ 
    timeout: 3000, 
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});
2

Let’s start with the HTML then. What do you want the resulting HTML to look like when it has your text description?

3

Thanks for the prompt reply Paul, I want the html to look something like this

 <div class="caption">
<h2>Title goes here</h1>
<p>detailed description goes here</p>
</div>
4

Okay, well you can add that as a part of the string returned from the pagerAnchorBuilder function.

How would you specify the title and description though. Could you retrieve those from the title and alt tags on the image itself?

5

I dont know, the thumbs are already present in the html of the plugin I have linked to and are preloaded, the main image however is not.

How could i concatenate this extra info on to the pageAnchorBuilder function? I am not really that experienced with javascript.

6

this is what I have written so far and it doesnt seem to be working, it is makin the thumbs dissappear

$(function() {
    $('#slideshow').cycle({
        timeout: 0,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a> ' <p> + this.alt + '</p></li>';
        }
    });
7

Shouldn’t it be slide.alt ?

8

If this is what you mean

$(function() {
    $('#slideshow').cycle({
        timeout: 0,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a> ' <p> + this.slide.alt + '</p></li>';
        }
    });
});

then no thats not working for me either.

9

No. Look at how slide.src is used.

10

Sorry but I cant see where it is used, tried using find to search all of the attached jquery files but could not find slide or slide.src anywhere.

11

It is the piece colored in red that I’ve marked in this copy of your code:


pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + [color="red"]slide.src[/color] + '" width="50" height="50" /></a> ' <p> + this.slide.alt + '</p></li>';
}
12

I thought you meant to see if that was a reference to a variable somewhere else.

13

I had a look again, I am sorry but I dont think I know what you mean

14

The image is passed to the function as a variable called slide. It is from that image that the src attribute is obtained. You can also retrieve other attributes from that image, such as the title attribute or the alt attribute.

15

Then why is it not working, I have already concatenated this.slide.alt as you can see in the code above.

I am sorry but I still dont have any idea of what you mean?

16

The this keyword in the function is not a reference to the image, or to something that contains the image. So this.slide is undefined.

Instead, you want to refer directly to the slide that was passed to the function itself.

17

Removing this from this.slide.alt to make it slide.alt was one of the first things I did but it still didnt work?

18

Does the element contain the information that you want to retrieve from it?

19

By the looks of things no

This slideshow is designed to display the main image programatically there is no html associated with it. The main image does not exist statically anywhere in the html

20

Normally the images that the cycle plugin uses are contained in the slideshow section of your page. Unless you can provide a sample version of your page, it’s useless to try and help you based on that initial link that you provided.