PDA

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. :)

ajfmrf
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. :)

jscheuer1
03-18-2013, 06:53 AM
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
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.

vwphillips
03-18-2013, 11:23 AM
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
03-19-2013, 09:10 AM
Thanks a lot, this is working :)