View Full Version : Image thumnails add-on

Alex Chen
03-18-2013, 02:38 AM
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. :)

03-18-2013, 05:03 AM
This is a little vague.

Can you clarify what you want to do?

something with thumbnails and links?

Alex Chen
03-18-2013, 06:24 AM
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. :)

03-18-2013, 06:53 AM
Why this particular slideshow script? You could use:




How to add thumbnails:


Alex Chen
03-18-2013, 10:12 AM
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.

03-18-2013, 11:23 AM
to GoTo a specific slide by index number

new function

var o=this;
if (typeof(nu)=='number'&&nu>=0&&nu<o.$imageslides.length){

modify function

navigate:function(keyword,nu){ //keyword: "back" or "forth"
var slideshow=this, setting=this.setting
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
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


Alex Chen
03-19-2013, 09:10 AM
Thanks a lot, this is working :)