[Plugin: radSLIDE] Add Thumbnails w/ pagerAnchorBuilder

I received an email back from the developers of the plugin with the following information:
—————————-
Hi ewon,

I’ve never actually used pagerAnchorBuilder before now, but I just got it working with radSLIDE. It’s just not the simplest to set up. For pagerAnchorBuilder to work, you also need to set a pager div. So, for example, if you want to put the slideshow on a page in wordpress, you have to edit that page, switch to HTML mode, and write something like this:

radslide 1
<div id=”radslide-pager”></div>

Then when you’re editing the settings of your slideshow, they need to look something like this:

{
timeout:2000,
speed:500,
pager: ‘#radslide-pager’,
pagerAnchorBuilder: function(index, element){
return ‘<p>SLIDE ‘+index+'</p>’;
}
}

So on your page you need to have an extra div to hold the pager items, and then in the radSLIDE settings you need to specify what the selector of that div is, and also specify how each individual slide should look inside the pagerAnchorBuilder function. Make sense?
———————————–

This only returns the numbers….

I inquired again about getting thumbnails rather than numbers and received this response:

————————————————

The reason element.src worked for them is their slideshow is just a collection of images, not a collection of divs like yours. Images have a src attribute, but your div has a bunch of stuff in it, not just an image. I no longer have my example setup anymore, but if you’re using jquery you can probably do something like this to get the src of the image:

$(‘img’, element).attr(‘src’)

That will look in the element for an <img> tag, and give you the src of it. I haven’t tested it though, so I might have gotten the syntax wrong.

————————————————

I’ve tried several different syntax variations but do not know enough to solve the problem. Any know? Here’s what I have that is not working:

{
timeout:0,
speed:750,
pager:'#project-thmbs',
pagerAnchorBuilder: function(index, element) {
	var img = jQuery(element).children("img").attr("src");
	return '<li><a href="#"><img src="' + img + '" width="100" /></a></li>';
}
}

Hi folks,

I figured it out. Here’s what I’ve got to make radSLIDE output thumbnails as the pager:

FOR RADSLIDE TEMPLATE

<div class="gallery" style="background: url('IMAGE_URL') no-repeat;">
	<div class="description">TITLE: DESCRIPTION</div>
	<div class="url" style="display: none;">IMAGE_URL</div>
</div>

FOR RADSLIDE JQUERY OPTIONS

{
timeout:0,
speed:750,
pager: '#project-thmbs',
pagerEvent:'click.cycle',
pagerAnchorBuilder: function(idx, slide) {
	return '<li><a href="#"><img src="' + jQuery(slide).find('.url').text() + '" alt="" width="100" /></a></li>'
}
}

FOR HTML PAGER ITEM

<ul id="project-thmbs">
</ul>

Hope this helps someone else and saves them hours of work!

ewon, just amazing!!!
Your post is what I need and I spend a lot of time searching for this kind of solution, a jquery cycle plugin with thumbnails.

The only strange thing is that the jquery options can’t parse right through the plugin, to solve I modify the radSlider plugin, more precisely the helpers.php found in the plugin folder, a few more changes and it’s ready.

Thanks a lot for the research and share of this!
Good life!
G

PS: a note to the developer team, at this point make a new version including this was a great idea to give some light to the plugin, by the way, thanks for this plugin ??