Currently published are (vertical):
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm
and (horizontal):
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
There's also another horizontal script of this type, but it duplicates the images for a continuous train:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I'm currently working on a sort of hybrid of all three. But it isn't ready for release yet.
I also have a unit for simplifying adding thumbnail controls to the Ultimate Fade In Slideshow. It's ready for release (just):
// Extra Buttons Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// add on for Ultimate Fade In Slideshow
// username: jscheuer1 - This Notice Must Remain for Legal Use
jQuery.extend(fadeSlideShow.prototype, {
extraButtons: function(pend, pause){
var $ = jQuery, dm = this.setting.displaymode, ims = this.setting.imagearray.length,
$nav, $tog, $stopbut, $gobut, numbut, uFObj = this, i = 1, timer,
nav = function(num){
uFObj.navigate(num);
if(pause){
clearTimeout(uFObj.setting.playtimer);
clearTimeout(timer);
timer = setTimeout(resume, pause);
}
},
stop = function(e){
e.preventDefault();
uFObj.navigate(uFObj.setting.imgindex);
},
resume = function(e){
if(e && e.preventDefault){e.preventDefault();}
if(dm.type !== 'auto'){
dm.type = 'auto';
uFObj.showslide('next');
}
}, $buts;
if(pend){
++ims;
$stopbut = dm.type === 'auto' || dm.wraparound? $(this.setting.stopbut || '<input type="button" value="Stop" />').addClass('stop') : '';
$gobut = dm.type === 'auto' || dm.wraparound? $(this.setting.gobut || '<input type="button" value="Go" />').addClass('resume') : '';
numbut = this.setting.numbut || '<input type="button" value="%i" />';
$buts = $('<span class="stopgonums"></span>').append($stopbut);
for(i; i < ims; ++i){
$buts.append(function(){return $(numbut.replace(/%i/g, i)).addClass('numbut');});
}
$buts.append($gobut);
--ims;
}
$(function(){
$tog = uFObj.setting.$togglerdiv.add('.' + uFObj.setting.togglerid);
$nav = (pend? $tog[pend]($buts) : $tog)
.find('.stop').click(stop).end()
.find('.resume').click(resume).end()
.find('.numbut').click(function(e){
e.preventDefault();
nav(this.getAttribute('data-index') || ($nav.index(this) % ims));
});
});
}
});
Place that at the very end, after everything else in fadeslideshow.js.
The way you use it is to declare a togglerid in the slideshow, and invoke it like so:
var mygallery = new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [700, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["image-3.jpg", "", "", "Leaves"],
["image-4.jpg", "http://en.wikipedia.org/wiki/Leaves", "_new", "Some day I'd like to explore these leaves!"],
["image-5.jpg", "", "", "Old Leaves"],
["image-6.jpg", "", "", "More Leaves"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "fadeshow1toggler"
}).extraButtons(null, 6000);
The null tells it you are supplying the markup, the 6000 is how many milliseconds to wait before resuming the slideshow if it is stopped by one of the thumbnail buttons. Omit that or set it to 0 to have the slideshow remain stopped after a thumbnail is clicked.
Now, in addition to the usual class names that you could put in the toggler division, you may also have a pause, resume, and numbut. The numbuts will be counted in order for you. As long as you have one for each image, they will navigate to that image. Like:
<div class="fadeshow1toggler">
<img src="thumb-3.jpg" alt="" class="numbut">
<img src="thumb-4.jpg" alt="" class="numbut">
<img src="thumb-5.jpg" alt="" class="numbut">
<img src="thumb-6.jpg" alt="" class="numbut">
</div>
so if you have another script to handle the scrolling of the thumbnails, just make sure they each have that class and that the toggler division is the outermost wrapper.
If you have twice as many, three times as many, whatever - as long as they are still in order, the code will determine which slide they go to. Like this would also work:
<div class="fadeshow1toggler">
<img src="thumb-3.jpg" alt="" class="numbut">
<img src="thumb-4.jpg" alt="" class="numbut">
<img src="thumb-5.jpg" alt="" class="numbut">
<img src="thumb-6.jpg" alt="" class="numbut">
<img src="thumb-3.jpg" alt="" class="numbut">
<img src="thumb-4.jpg" alt="" class="numbut">
<img src="thumb-5.jpg" alt="" class="numbut">
<img src="thumb-6.jpg" alt="" class="numbut">
</div>
You'd probably not want to hard code that, but the crawler script mentioned above would generate markup like that.
There are other options with this add on. You can have the buttons generated automatically and can specify a template for the HTML to be used (defaults to numbered input buttons).
The code also extends what the toggler division can be. Instead of a single division with an id as set in the on page call, it is extended to also include any division with that class. This can be useful if you want top and bottom controls, or want to split up the controls to different areas on the page. The numbut elements if split up, will still fire in the order they're found on the page. But you can always give each one its own data-index attribute to override that if need be:
<div class="fadeshow1toggler">
<img src="thumb-3.jpg" alt="" class="numbut" data-index="0">
<img src="thumb-4.jpg" alt="" class="numbut" data-index="1">
<img src="thumb-5.jpg" alt="" class="numbut" data-index="2">
<img src="thumb-6.jpg" alt="" class="numbut" data-index="3">
</div>