add text function to jquery slideshow?

[WavyDavy]

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

[paul_wilkins]

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

[WavyDavy]

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>

[paul_wilkins]

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?

[WavyDavy]

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.

[WavyDavy]

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

[paul_wilkins]

Shouldn't it be slide.alt ?

[WavyDavy]

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.

[paul_wilkins]

If this is what you mean

No. Look at how slide.src is used.

[WavyDavy]

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.

[paul_wilkins]

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.

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="' + slide.src + '" width="50" height="50" /></a> ' <p> + this.slide.alt + '</p></li>';
}

[WavyDavy]

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

[WavyDavy]

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

[paul_wilkins]

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

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.

[WavyDavy]

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?

[paul_wilkins]

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?

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.

[WavyDavy]

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

[paul_wilkins]

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

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

[WavyDavy]

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

[paul_wilkins]

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.

[WavyDavy]

The thumbnail images do not already exist within the html this is what the pagerAnchorBuilder: function builds. I got it working but the alt text is appearing underneath all of the thumbs, not underneath the single main image.

I dont want the alt text underneath all of the thumbs, I want just one single text description under the currently displayed main image.

Looks like I would need a whole new function to achieve this as the pager function is not designed to work with the main image.

[WavyDavy]

The initial link is actually correct and this is what I am building my slideshow out from.

Where i was wrong was in assuming the full sized images didnt exist in the main page, they do exist, its the thumbnails which dont exist and are as I have said above being built up by the pagerAnchorBuilder function.

This is the html the pagerAnchor Builder function creates the unordered list of thumbnails from

<div id="slideshow" class="pics">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />

        </div>

[paul_wilkins]

The initial link is actually correct and this is what I am building my slideshow out from.

Where i was wrong was in assuming the full sized images didnt exist in the main page, they do exist, its the thumbnails which dont exist and are as I have said above being built up by the pagerAnchorBuilder function.

This is the html the pagerAnchor Builder function creates the unordered list of thumbnails from

<div id="slideshow" class="pics">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />

        </div>

Thank you. Put those images in their own containers, such as divs, with the title and description that you want in them too.

For example:

<div id="slideshow" class="pics">
    <div>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <div class="caption">
            <h2>Title goes here</h1>
            <p>detailed description goes here</p>
        </div>
    </div>
    ...
<div>

The cycle plugin should then cycle through each of those divs that are in the slideshow area.

[WavyDavy]

Ok here is a link to where I am at, its pretty much the same as the original link

JQuery Cycle Plugin - 'updateActivePagerLink' Demo

Here is the directory that contains all of the images and javascript

Index of /~nova/gallery/window-jquery_files

And this is what the page will look like once its complete

[WavyDavy]

I assume this is how you wanted me to markup the text

edit: I just tested it and the markup is wrong I assume this is because of the individual divs wrapped around each image tag?

<div id="slideshow" class="pics">
            <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
              <div class="caption">
                <p>detailed description goes here</p>
              </div>
            </div>
            <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
              <div class="caption">
                <p>detailed description one goes here</p>
              </div>
            </div>
            <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
              <div class="caption">
                <p>detailed description two goes here</p>
              </div>
            </div>
            <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
              <div class="caption">
                <p>detailed description threee goes here</p>
              </div>
            </div>
            <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
              <div class="caption">
                <p>detailed description four goes here</p>
              </div>
            </div>
            <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
              <div class="caption">
                <p>detailed description five goes here</p>
              </div>
            </div>
            <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
              <div class="caption">
                <p>detailed description six goes here</p>
              </div>
            </div>