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.
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.
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
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>
You can use divs in the slideshow, or you can use a UL element for the slideshow with the list items for the content. The cycle plugin just loops through the elements in the slideshow. The cycle plugin doesn’t care whether they are images or not.
You may have to adjust how you handle your layout, but that’s all part-and-parcel of having more than just a single image to cycle.
The pager function is not working at all for me, are you sure this is the correct function to be using to display text, this function seems to be for building thumbnails not displaying text underneath the main image.
I have tried what you suggested but it is creating an extra blank thumbnail div that once selected shows the text without an image.
The pager function is dependent on HTML structure of your page, so we can come back to that once your page is showing the title and description that you require.
Give the slideshow an auto height, and the heading and description should now become visible.
#slideshow {
margin: 20px;
height: auto;
}
The description is visible but the pager thumbnails are not, you can see what I mean here
JQuery Cycle Plugin - ‘updateActivePagerLink’ Demo
Here is the html code for the gallery
<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>
</div>
Now that the HTML content shows what you require, we can work on the scripting that depends on that HTML content.
With this function:
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
}
The slide variable used to refer to a single image. Now, the slide variable refers to the div that contains the image and description.
So, instead of using slide.src, you need to get the image from within the div, with something like this:
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + $('img', slide).attr('src') + '" width="50" height="50" /></a></li>';
}
Thank you Paul, that code works perfectly
I just need to add a numbered pager between main image and description and prev/next arrows. How hard would that be to implement
The pagerAnchorBuilder is what used to create the numbered pager, which has been replaced with your thumbnail pager. I don’t know how easy it will be to create a separate numbered pager as well.
The prev/next stuff is easy to achieve though. See the jQuery cycle prev/next demo page.
Would I have to create a new nav#2 div and a whole new function to achieve this?
Currently you specify where the pager will be with:
pager: '#nav',
I don’t think the cycle plugin is designed to be able to work with more than one pager.
It should be possible though to create a separate list of linked numbers, where you override the onclick event to trigger the appropriate slide, for example:
$('#slideshow').cycle(4);
Like this?
$(‘#slideshow’).cycle(0);
$(‘#slideshow’).cycle(1);
$(‘#slideshow’).cycle(2);
First things first though. Let’s get the HTML in place before working on the scripting.
The Intermediate Demos 2 page has one for the pager, so we can take the HTML from that.
<div id="pager" class="pager">
<a href="#">1</a>
...
</div>
However, you don’t want to manually put all those links in the HTML. Instead, you want to start it off as empty so that scripting can then put in the correct number of links.
<div id="pager" class="pager"></div>
Then you can use scripting to add a link in the pager for each thing in the slideshow:
$('#slideshow').children().each(function (i) {
$('<a>', {
href: '#',
text: i + 1,
click: pagerHandler
}).appendTo('#pager');
});
The pagerHandler function just takes the number in the link, and uses that as a reference by which to trigger the appropriate slide:
function pagerHandler() {
var slide = Number(this.innerHTML - 1);
$('#slideshow').cycle(slide);
return false;
}
update to properties of the link builder code
I have put in the html but I cant get the code to work
The pager div has a green background to make it easier to see where it is on the page
JQuery Cycle Plugin - ‘updateActivePagerLink’ Demo
this is my code
// redefine Cycle's updateActivePagerLink function
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
$(pager).find('li').removeClass('activeLI')
.filter('li:eq('+currSlideIndex+')').addClass('activeLI');
};
$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
$(pager).each(function() {
console.log(clsName + '; ' + currSlide );
$(this).children().removeClass('activeLI').filter(':eq('+currSlide+')').addClass('activeLI');
});
};
$(function() {
$('#slideshow').cycle({
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + $('img', slide).attr('src') + '" width="50" height="50" /></a></li>';
}
});
});
$('#slideshow').children().each(function (i) {
$('<a>', {
href: '#',
text: i + 1,
click: pagerHandler
}).appendTo('#pager');
});
function pagerHandler() {
var slide = Number(this.innerHTML - 1);
$('#slideshow').cycle(slide);
return false;
}
this is my html
<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>
</div>
<!--end slideshow div-->
<div id="pager" class="pager"></div>
<!--end pager div-->
You are executing the scripting code before the body content even exists.
Put the code inside this callback function, so that it runs once the rest of the page is ready.
$(function () {
...
});
I have the numbers now but I must still be missing something as they are not clickable, this is the code
$(function () {
$('#slideshow').children().each(function (i) {
$('<a>', {
href: '#',
text: i + 1,
click: pagerHandler
}).appendTo('#pager');
});
function pagerHandler() {
var slide = Number(this.innerHTML - 1);
$('#slideshow').cycle(slide);
return false;
}
});
Put the pagerHandler function in there too, preferably before the other code in there.