Image thumnails add-on

[Alex Chen]

1) Script Title: Image thumnails add-on

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

3) Describe problem: If I wanna add-on id on each slide with img thumnails link to specific slide, what should I do for it? thank you. :)

[ajfmrf]

This is a little vague.

Can you clarify what you want to do?

something with thumbnails and links?

[Alex Chen]

Hi, yes I wanna add-on image thumbnails, instead of the dot thumbnail that usually carousel has, similar to http://www.menucool.com/slider/javascript-image-slider-demo3. Each of the slide has its unique ID, so that thumbnail can be link to it manually. Thank you. :)

[jscheuer1]

Why this particular slideshow script? You could use:

http://dev7studios.com/nivo-slider/

Video:

http://www.youtube.com/watch?v=2XwWri6Xi2s

How to add thumbnails:

http://support.dev7studios.com/articles/nivo-slider-jquery-plugin/using-thumbnails-with-the-nivo-slider

[Alex Chen]

Hi, actually I need a responsive slider with specific bg for each slide, and with the image thumbnail as well.., is it possible or do you have any advice for me? Thanks for your advice anyway.

[vwphillips]

to GoTo a specific slide by index number

new function


goto:function(nu){
var o=this;
if (typeof(nu)=='number'&&nu>=0&&nu<o.$imageslides.length){
clearTimeout(o.rotatetimer);
o.setting.displaymode.stoponclick=true;
o.navigate(nu>=o.curslide?'forth':'back',nu);
}
},




modify function


navigate:function(keyword,nu){ //keyword: "back" or "forth"
var slideshow=this, setting=this.setting
clearTimeout(this.rotatetimer)
if (!setting.displaymode.stoponclick && setting.displaymode.type!="manual"){ //if slider should continue auto rotating after nav buttons are clicked on
this.curstep=(keyword=="back")? this.curstep-1 : this.curstep+1 //move curstep counter explicitly back or forth depending on direction of slide
this.rotatetimer=setTimeout(function(){slideshow.rotate()}, setting.displaymode.pause)
}
var dir=(keyword=="back")? (setting.orientation=="h"? "right" : "down") : (setting.orientation=="h"? "left" : "up")
var targetslide=(keyword=="back")? this.curslide-1 : this.curslide+1
targetslide=(targetslide<0)? this.$imageslides.length-1 : (targetslide>this.$imageslides.length-1)? 0 : targetslide //wrap around
typeof(nu)=='number'?targetslide=nu:null;
if (this.animation_isrunning==false)
this.slide(targetslide, dir)
},



to call


<input type="button" name="" value="Goto 0" onmouseup="firstbgcarousel.goto(0);"/>
<input type="button" name="" value="Goto 1" onmouseup="firstbgcarousel.goto(1);"/>
<input type="button" name="" value="Goto 2" onmouseup="firstbgcarousel.goto(2);"/>
<input type="button" name="" value="Goto 3" onmouseup="firstbgcarousel.goto(3);"/>


where the buttons are your thumbnail images

and firstbgcarousel if the global variable var firstbgcarousel=new bgCarousel({

or with integrated pagination see

http://www.vicsjavascripts.org.uk/SlideSlideShowIII/SlideSlideShowIII.htm

[Alex Chen]

Thanks a lot, this is working :)