Fading JavaScript Slideshow – TinyFader

Javascript 146 responses so far

Tiny Fader

Click here for the latest version.

This 1.4KB fading slideshow script can easily be customized with CSS. It is a slight variation from the TinySlider script and is still completely standalone and uses a simple unordered list structure to support any content. It even gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and an initial display toggle.

Self-employment has kept away from my blog for quite awhile but I hope to be spending more time here soon. I will be addressing all of the accumulated requests and bug reports for all of my scripts as soon as I possibly can. I also have a couple updated script versions and completely new scripts in the works as well as some post ideas. If you have emailed me anytime in the last 6 months or so I sincerely apologize if I did not get back with you, I just had too much going on to deal with all to all correspondence.

To initialize the script use the following:

var slideshow=new TINY.fader.fade('slideshow',{
	id:'slides', // ID of the parent slideshow unordered list
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume after interrupted, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // If navid, class to set on the current LI
	visible:true, // Initially display the first slide vs fading it in
	position:0 // Initial slide position, defaulting to the 0 index
});

The first parameter taken by TINY.fader.fade is the variable name used for the object instance. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here.

Click here for the demo.

Click here to download the source code.

9/30/2010 – Resolved IE bug.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • Nathan

    Welcome back Michael, you have been missed!

    This script looks great, another TINY script to add to the already awesome list.

    Thanks!

  • Pingback: Simple & Lightweight JavaScript Slideshow – TinyFader()

  • simon

    glad you are back online! – have been hankering for some more TINY magic..

  • Pingback: 简单和轻量级JavaScript幻灯片 – TinyFader()

  • Pingback: JavaScript Slideshow – TinyFader | Keevitaja kirjutab()

  • I am interested in the concept of tiny + standalone, but I see a couple issues here.

    First, the fading effect on the demo only works once, if you go back to the picture it doesn't work anymore.

    Second, "unordered list structure to support any content" doesn't sound right. AFAIK unordered lists are inline elements and don't accept block elements. Also, I am curious about a fading demo featuring more complex content (tables for example).

  • Pingback: مرجع اسکریپت – وال فا اسکریپت » بچرخ محو کن (اسلاید شو با افکت محو عکس)()

  • Thank you for the script!

    Has somebody else problem with IE8? -> http://forum.leigeber.com/topic/350-tinyfader-doesnt-work-with-ie8/

    Greetings

  • @Christophe – The script could easily be modified to use another structure within the init function if the UL does not fit your needs. As for tables, it will be hit or miss based on the browser. I am not 100% sure but doubt any other elements would have issues.

    @Christophe, @Viktor – The IE issue you were referring to has been resolved.

  • Thanks for the update Michael! Quite impressive to see all these features in 1.4 kb.

    And yes, I'd rather use divs to host any content.

  • Hello Michael,

    thank you for the fast bugfix!

    I have programmed a slideshow module for Joomla with your scripts: http://www.kubik-rubik.de/joomla-hilfe/modul-jts-jtinyslideshow-joomla

    Thank you very much!

  • A truly functional slide show with minimum foot print. Great stuff, Thanks

  • Pingback: Lightweight JavaScript Slideshow – TinyFader :: Graficznie()

  • Very nice script. It is scripts exactly like this that make life easier for web developers. Thank you so much!

  • Pingback: Lightweight JavaScript Slideshow – TinyFader | Rapid Library()

  • Pingback: TinyFader – Fading JavaScript Slideshow | Webappsdepot - Web Resources, CSS, Ajax, Tutorials, JavaScript, Tools, etc()

  • Pingback: Scripts opensource e gratis Ottobre 2010 | Simo Blog()

  • Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.58)- rampantdesigntools.com()

  • Pingback: Hazir Javascript Slideshow : Paylasimin Adresi()

  • Pingback: TinyFader – Elegante y liviano slideshow con Javascript | Pixelco blog()

  • This is nice, I'm gonna try it today.

  • Pingback: Fading JavaScript Slideshow – TinyFader | deneme()

  • Pingback: TinyFader — Slideshow poids-plume avec effet de fading()

  • Great compact script again, with great features to boot, will definitely keep this in mind for projects.

  • TILiBRA

    Another great script!
    Congratulations and thanks for all those useful scripts!

  • Excellent slider and love how it degrades gradually, we like to use divs in mark-up as well, Thank you! LT

  • Pingback: Agence Web Comevents » Plugin slideshow TinyFader()

  • flashpixel

    How can we pause it on hover?

  • Shawn Joslyn

    I'm using TinyFader on a small site and it's working great with FF and Safari. In IE8 however, the slides don't advance automatically OR when clicking on the numbered buttons (I've eliminated the next and previous buttons). Just downloaded this morning so I should have the version including the IE8 fix. Looking for some ideas on where to look to solve this…

    http://forum.leigeber.com/topic/350-tinyfader-doesnt-work-with-ie8/page__gopid__1056&

  • Shawn Joslyn

    Doh!!! Nothing wrong with TinyFader… IE8 was blocking the script. That's not embarassing 😉

  • Thank you for this script! I like fast loading but effect sites. Keep up good work!

  • Great to see that some one is here to help Every one. Great code,want to definitely fix it some where in a project to see its effectiveness.

  • Hi, my name is Louie Sison. I just started my own blog on Web Development, Search Engine Optimization, Blog Tips and Make Money Online. I also share free stuffs like WordPress themes that I myself designed. I stumble upon your blog when I was researching for my article’s content. I am impressed on you share your ideas. Your site is very helpful for a newbie blogger like me. I will definitely come back to read more materials. Again, thank you very much. More power to you.
    <a href="http://dreamhousewebsolutions.net/">DreamHouse Web Solutions</a>

  • Thanks for this valuable post with us. This java script slide show may helpful for web developers.

  • Great code and it works well, thanks for sharing. I am looking forward to future posts.

  • Catia

    This is a great script but I've noticed that the fonts get very jagged in IE (tested with 7 and 8). I've looked around for an answer but all I can find is that it might be clear-type getting knocked out by the opacity but I don't know enough javascript to know how to kick IE back into rendering the font with clear-type back on after the fade.

    Any ideas?

  • Thanks for the script, looking forward to your future posts. I downloaded this and hope to use it on a new site. Hopefully you can pull away from work to post more often.

  • I'm trying to incorporate the tinyfader in an element within a table to show sample pages of our ebook, Lucky The Left Pawed Puppy, as I have other pics in other elements promoting products. I lopped off the picture numbers and navigation since I only want an automatic display of the pages.
    The problem I can't get around is the slideshow floats near the middle of the page, seemingly ignoring the fact that it's being instantiated with a TD element. How can I position the display to stay within the TD?

  • I forgot to show you the page with the problem:

    http://www.windmillworks.com/lucky/index.html

  • Jhael

    I am a web design student, just beginning to learn on how to build a website and we're building one as a class project this semester. I find your blog very interesting and helpful. In fact I'm planning to use this fading javascript slideshow blog/tutorial on the site that I am building if I may. I will let my classmates know about your site too. Really neat ideas you have in here.

  • MW

    I would like to have the right arrow disabled on the last slide, and the left arrow disabled on the first slide, instead of the loop behavior. Can you help? Thanks- this is a great script!

  • Fabien

    Very nice script . Hacked it a litle bit to handle images of different size or orientation : fading out current image while fading in new image.

  • Edward Lee

    Thanks Michael, best slideshow I have found yet!

    I have a small issue with mine, the pagination buttons disappear after about 30seconds, any ideas why?

    Happy to send you a link if you email me.
    Many Thanks
    Regards
    Ed

  • Edward Lee

    I think I have worked out why, but haven't figured a fix. I think it might be related to the fact that the slideshow works on the z-index property, and I have floated the pagination buttons over the slides. Any ideas on a a fix?

    Thanks
    Ed

  • Great script.
    i implemented it here without the numbered buttons – http://www.davidepetronici.com/works/alcon.html
    Problem is that the transitions fade is waaaay too slow in IE (no such probs in firefox/chrome).
    I am no jscript expert, where can I change the fade speen for IE?
    Thanks

  • Dan

    Your TinyFader works very well. I use it for an intro slideshow on my sites intro page:

    http://www.danmoralesphotography.com

    I removed the navigation links and all that. Hope you like to see it in action.
    Thanks for all your hard work!

  • Mikey

    Seriously –
    i implemented it here without the numbered buttons – http://www.davidepetronici.com/works/alcon.html
    Problem is that the transitions fade is waaaay too slow in IE (no such probs in firefox/chrome).
    I am no jscript expert, where can I change the fade speen for IE?
    Can anyone help????????????????????
    Thanks

  • Picheto

    I also had the problem with the floated pagination buttons dissappearing. I took the simple way: setting the z-index of the pagination ul to 999999. That way, if I put a 3 second delay between auto-advances, it will take about 34 days for the buttons to disappear, which is good enough for me 😉

  • Great stuff and all that in 1.4kb, awesome, thanks!

  • Marsjannno

    Hi, I am newbie in design, however I managed to implement your script. The only thing that is bothering me is whether it is possible to move buttons that are below images to be located on the image?

  • Achaparro41

    Great slideshow!

    I was wondering if there was a way to have each slide have a photo and text?
    It would be so awesome if anyone could help out!

  • Thanks for this JavaScript fading slide show. Using JavaScript is a powerful tool in web development. We use something similar at purencool and I am always getting comments about it

  • Pingback: Raccolta di risorse gratuite jQuery per web designer e sviluppatori web.()

  • Jay

    Any way to have Play / Stop buttons?

  • JiF

    Very good script, except that it's slowing down MSIE. It's not only a matter of fading speed : the whole navigation is slowed by the script. The rollover on the pagination buttons has a strong lantence too. Did anyone found a solution to fix it ?

  • JiF

    Just found the source of the problem : the "position:absolute" set upon the list elements. MSIE doesn't seem to enjoy it, even if it is set through the css stylesheet.

  • Odette Vargas

    Great script, I've used it plenty. Only this time i made one with rounded edges. In IE8 and below it turns the background of my pngs black. Any solution? Works fine in all other browsers and in IE9.

  • Using Java script i have placed sideshow on my website, please visit.. http://www.drupal-themes.adodis.com

  • I love here at the http://www.syxt.net

  • Please post on how to add text UNDER the image!! 🙂

  • rs

    hi. i have a problem with using tiny fader with tiny slider. one of them are not working. how can i fix this?
    thanks.

  • X. Debanne

    It seems that there is an error on the screenshot placed on the web page.
    That is the first line is "… TINY.slider.slide(…" and should be "… TINY.fader.fade(…" according to the source code.
    Kind regards
    Xavier

  • Hnichols

    Have you found a solution to this?

  • Holly

    Hello and thanks for the script.
    I used it to create this slideshow here:http://www.empiremerchantadvance.com/dev/

    I cannot seem to figure out why in IE the third slide in the set shows at first and then takes so long to kick in before working. It's perfect in FF.

    Any idea?

  • Amy

    Hi! Trying to integrate this into my website, but keep getting this error in Firebug:this.g[x] is undefined

    Don't know much about jquery, but could you tell me what could be the possible problem??

    Thanks for the great script
    -Amy

  • Any way to pause the slider?Would it still work if I dynamically added more list items while the slider is running?
    Thanks. Great little script.

  • Caleb

    I'm trying to pause it as well.  Yes, you can add more items.

  • Guest

    I don't know if this is the most efficient or elegant way, but it seems to work:
    Add this to the fade.prototype.pos=function(i,a,v), after the   var p=this.u[i];
    if(i==(this.l-1)){hideStuff('rarrow');}else{showStuff('rarrow');}; if(i==0){hideStuff('larrow');}else{showStuff('larrow');};

    and add these functions
    function showStuff(id) {
            document.getElementById(id).style.visibility = 'visible';
        }
    function hideStuff(id) {
            document.getElementById(id).style.visibility = 'hidden';
        }

  • Pingback: Javascript Slideshow sin cargar “na” « Kgë3n_t0d0L_CSS()

  • Bassplaya4string

    Any way to reset the opacity to zero if it is not the current slide?

  • gcmax

    Got it working minus the initial advertisement frame after a little trial and error and also 2 slideshows on one page both now working! Thanks again for all the hard work put into this, you rock!

  • hi i suggest this mod:

    /*fabio vergani mods*/
    var TINY={};
    function T$(i){return document.getElementById(i)}
    function T$$(e,p){return p.getElementsByTagName(e)}

    TINY.fader=function(){
        function fade(n,p){this.n=n; this.init(p)}
        fade.prototype.init=function(p){
            var s=T$(p.id), u=this.u=T$$('li',s), l=u.length, i=this.l=this.c=this.z=0;
            var galind = T$(p.navid);
            if(p.navid&&p.activeclass){this.g=T$$('li',galind); this.s=p.activeclass}
            s.style.overflow='hidden'; this.a=p.auto||0; this.p=p.resume||0;
            for(i=0;i<l;i++){
                if(u[i].parentNode==s){
                    //u[i].style.position='absolute';
                    u[i].style.position='fixed';
                    this.l++;
                    u[i].o=p.visible?100:0;
                    u[i].style.opacity=u[i].o/100;
                    u[i].style.filter='alpha(opacity='+u[i].o+')'
                };
                galind.innerHTML +=  "<li onclick='slideshow.pos("+i+")'>"+(i+1)+"</li>"
            };
            //this.pos(p.position||0,this.a?1:0,p.visible)
        },
        fade.prototype.auto=function(){this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)},
        fade.prototype.move=function(d,a){var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)},
        fade.prototype.pos=function(i,a,v){
            var p=this.u[i]; this.z++; p.style.zIndex=this.z;
            clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;
            if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}
            if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}}
            p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20)
        },
        fade.prototype.fade=function(i,a){
            var p=this.u[i];
            if(p.o>=100){
                clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}
            }else{
                p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'
            }
        };
        return{fade:fade}
    }();

  • Smart Team

    Wow, a FREE Slideshow Maker Service for Web APP,
    can use it for ANY web APP, even WordPress Themes. a sample use available in download files.

    Main Site : http://www.DolphinSlideshow.com,
    FREE LICENSE version : http://www.DolphinSlideshow.com/downloads/DolphinSlideshowMaker.zip
    PRO LICENSE version : http://codecanyon.net/item/dolphin-slideshow-maker/309834
    Video Tutorials : http://www.DolphinSlideshow.com/Tutorial

    Live Preview Demo Login: http://www.DolphinSlideshow.com/Demo
    Username: admin
    Password: admin

  • Smart Team

    Wow, a FREE Slideshow Maker Service for Web APP,
    can use it for ANY web APP, even WordPress, PHP-Nuke, Joomla, DotNetNuke,… Themes. a sample use available in download files.

    Main Site : http://www.DolphinSlideshow.com,
    FREE LICENSE version : http://www.DolphinSlideshow.com/downloads/DolphinSlideshowMaker.zip
    PRO LICENSE version : http://codecanyon.net/item/dolphin-slideshow-maker/309834
    Video Tutorials : http://www.DolphinSlideshow.com/Tutorial

    Live Preview Demo Login: http://www.DolphinSlideshow.com/Demo
    Username: admin
    Password: admin

  • melih

    hi, there is only one problem with this script. that is showing the back slides which are not currently shown. Because the script doesn't reduce the opacity of the inactive slides. i tried to do that but i couldn't how can we do that. 

    note: giving a background to the 'li' tags is not a solution. 

  • Dc Cavpav

    Hi gcmax – I'm trying to get 2 slideshows on my page and was wondering – How did you manage to get 2 slideshows on the same page? – could I look at your page / code?

  • gcmax
  • Has anyone worked out a way to add a pause feature to this yet? only thing it's missing.. thanks in advance..

  • Jk

    okay I must be doing something dumb.  the sample works fine on my computer, but in my file the slideshow won't run and I get this error:
    "null is null or not an object"
    tinyfader.js    Line 4, char 19
    then it gives the tinyfader.js file location.

    the first 4 lines of the tinyfader.js are:
    var TINY={};

    function T$(i){return document.getElementById(i)}function T$$(e,p){return p.getElementsByTagName(e)}

    what am I missing here?

  • Jk

    I figured out it's giving this error because I'm removing the pagination section.  how can I remove this and get it to work?
     <ul id="pagination" class="pagination">  <li onclick="slideshow.pos(0)">1</li>  <li onclick="slideshow.pos(1)">2</li>  <li onclick="slideshow.pos(2)">3</li>  <li onclick="slideshow.pos(3)">4</li> </ul>

  • Jk

    duuh.  I removed this line
     navid:'pagination',
    and now it works just fine…

  • Certskey

    I am look onward to Another great article from you.
    <a href="http://www.certificationkey.net/exams/70-290.php">Testking 70-290</a> | <a href="http://www.certificationkey.net/exams/N10-004.php">Testking N10-004</a>

  • Got it working minus the initial advertisement frame after a little
    trial and error and also 2 slideshows on one page both now working!

  • Is there no way, to replace the li slideshow for a div slideshow, so that the div-tags are rotating?

  • Ak47

    What do we mean by: "To initialize the script use the following:"?
    The demo works great, but when I upload I only get the 3 images…
    What am I doing wrong?
    Is the script not being accessed?

  • Ak47

    Figured out the first issue…now it seems to be floating above my content!
    How do I anchor it into a place?

  • Z Khaghani

    Thanks a lot!

  • juglar

    wtih a try and catch

  • Alisha Saim
  • Leon

    Any way to get the slide to stop on the last image rather than looping? Thanks!

  • good! So wonderful!Thank you.

  • LOVE IT!  i attempted to make this once…with utter failure.  i shall try once again, just because of your post. 🙂

  • Seo Siraj

    great info. thanks for sharing

  • DanielJames

    Comment out or remove the following in index.html:
    <!– <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)">1</li>
            <li onclick="slideshow.pos(1)">2</li>
            <li onclick="slideshow.pos(2)">3</li>
            <li onclick="slideshow.pos(3)">4</li>
        </ul> –>
    </div>
    <script type="text/javascript">
    var slideshow=new TINY.fader.fade('slideshow',{
        id:'slides',
        auto:3,
        resume:true,
        /*navid:'pagination',*/
    Then in tinyfader.js remove or comment out:

            /*if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}*/

    and

    /*
            if(this.g){
                for(var x=0;x<this.l;x++){
                    this.g[x].className=x==i?this.s:'';
                }
            }*/

    This worked in latest firefox and ie at least

  • Prastyananda

    I likes it

  • Subasowm Dec23

    how to slide show take it coding used in html format
     

  • Hi, Have you been informed or found a way to pause of hover at all? cheers..

  • We all really like this slideshow, but there is one thing missing that a couple of us have asked for help with, and that is if it is possible to pause on hover ( mouse over ) and we've had no response, if there is a way, would you be kind enough to inform us? or at least reply to let us know it's not possible.. 

    Cheers..!!

  • adumpaul

    Nice article.Thank you for sharing.

  • Pacman411

    This script doesn't work with IE 9.  Brings up scroll bars and doesn't play a slide show at all.  Not sure if this is the same "IE Bug" from earlier versions of IE.

  • Josh

    Ok sorry guys they script will work for IE9 once you "allow blocked" content. Time for me to take a coding break, the common sense part of my brain is not working.

  • Donkleiff

    cool….no wonder!!

  • James

    What would be nice if the buttons on the bottom were centered. 🙂

  • Thank you for the code

  • Silent_cj

    Just use left margin to change that.

  • Charlie

    Thanks very much for this, simplistic but it works!  I modified it a fair bit and I've got rid of the forwards and backwards buttons, and used negative margins to play the slide selectors inside the image, looks really neat 🙂

  • Silent_cj

    put*

  • adumpaul

    Great article.I love this.

  • Me

    Just searching for the same feature

  • Great script, I've used it plenty. Only this time i made one with rounded edges. In IE8 and below it turns the background of my pngs black. 

  • ale

    how can I stop the z-index growing? i need to put a position absoute object over the images. Thanks

  • For those who asked about a pause button, add the following code to 'tinyfader.js'

     fade.prototype.pause=function(){  clearInterval(this.u.ai); };
    Replace the ';' that is after the 'fade.prototype.fade' function with a ',' then paste this after the ',' so you code looks like…

    //code snippet of tinyfader.js
    …, fade.prototype.fade=function(i,a){  var p=this.u[i];  if(p.o>=100){   clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}  }else{   p.o+=5; p.style.opacity=p.o/100; p.style.filter='alpha(opacity='+p.o+')'  } }, fade.prototype.pause=function(){  clearInterval(this.u.ai); };
    //end snippet

    Once that code is in place you can call the pause function by using 'slideshow.pause()', or '*slidshowname*.pause()'. To play the slide show again just call 'slideshow.auto()'.

    Hope that helps

  • Thanks for this JavaScript fading slide show. Using JavaScript is a powerful tool in web development.

  • Poor Designer

     Thanks a lot Aaron. I was looking for this one.

  • Chloë

    Nice slideshow,

    although I am having some troubles in IE9 compatibility's mode. Could you help? 🙂 I have seen an other site using the slider which doesn't have this problem so I guess I made a small mistake somewhere. 

    I have added 2 screenshots, the first one is how it looks like in IE9 compatibility's mode and the second shot is how it is supposed to look (made from Chrome).
    It is a css issue which I can't figure out :(, can you help? If U need the URL, I'll send 🙂

  • Chloë

    I´d like to add:

    If u see any "Opslaan als" button, that's a mistake from the screenshot-program 🙂

  • ale,

    to keep the z-index from growing replace the fade.prototype.pos function with…

     fade.prototype.pos=function(i,a,v){  for(j=0;j<this.u.length;j++){if(j!=this.c && j!=i)this.u[j].style.zIndex=0;}  this.u[this.c].style.zIndex = 1;  var p=this.u[i]; p.style.zIndex=2;  clearInterval(p.si); clearInterval(this.u.ai); this.u.ai=0; this.c=i;  if(p.o>=100&&!v){p.o=0; p.style.opacity=0; p.style.filter='alpha(opacity=0)'}  if(this.g){for(var x=0;x<this.l;x++){this.g[x].className=x==i?this.s:''}}  p.si=setInterval(new Function(this.n+'.fade('+i+','+a+')'),20) },

    This keeps the max zindex of the gallery at 2. Hope that helps.

  • Chloë, could you post the link to the site? thanks

  • Leon,

    to prevent the slide show from looping replace the line

       clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai){this.auto()}

    in the fade.prototype.fade function with

       clearInterval(p.si); if((a||(this.a&&this.p))&&!this.u.ai&&(i+1)!=this.u.length){this.auto()}

  • John

    This is really really cool.

  • Richard

    I'm currently using TinySlider on my website, and now I want to put the tinyfader instead. How can I do it without editing my code? I have tried to switch the .js files, as well as the initialization script, but it didn't work… What's the problem actually? Thanks!!!

  • Mig31an225g5

    Hello! 
    I don't understand, why TinyFader doesn't work, what i do not correctly?  Chrom to give out an error on 4 lines tinyfader.js:Uncaught TypeError: Cannot call method 'getElementsByTagName' of null;

  • Simon

    I included an <iframe>-youtube-video in my 3rd <li>. On mac it works just fine in any browser but on windows IE and FF the video is always on top. How can I get this to be invisible in the other <li>?

  • Does your slideshow ul have the same id as the one being passed to the initializer? For example

    <ul id="slides>…li elements…</ul>

    <!– call to fader –>
    var slideshow=new TINY.fader.fade('slideshow',{<br>id:'slides', // ID of the parent slideshow unordered list <br>auto:3, // Seconds to auto-advance, defaults to disabled <br>resume:true, // Resume after interrupted, defaults to false <br>navid:'pagination', // Optional ID of direct navigation UL <br>activeclass:'current', // If navid, class to set on the current LI <br>visible:true, // Initially display the first slide vs fading it in <br>position:0 // Initial slide position, defaulting to the 0 index});

  • Topher

    Is there a way to put the navigation number squares inside the image, so the square are on top? I have fiddled with the code but can't get the numbered square to fit insite the image box.

  • Hugh

    Lovely little script, works great. Quick question, is there something in the script where I can edit the length of how long each image is displayed before it fades into the next one?

  • Dustin

    I'm having an issue when the user has a slow internet connection. The DOM is loaded and ready before
    the all the images in the slide show are loaded and it causes multiple
    images to show up at the same time. Is there something I can change in the JS file to stop the slideshow from starting until all the images on the page are loaded?

  • Shiva

    It is very nice and useful for me…..
    Thank you…

  • Jesse

    This is great! Thanks for posting. I had one question though… Whenever I add more than for images the script gets really bogged down. Any ideas?

  • Iispartners Jany

    can help me. custom
     I want play all image after that stop.

  • Mikeyfitzy

    <a>

  • jeyjoo

    I added this slideshow here – <a href="http://www.jeyjoo.com">Jeyjoo.com</a&gt;, but this uses individual images for the nav.
    I adapted it here – <a href="http://www.varaldocosmetica.it/en/">Varaldo olive oil cosmetics</a> so that the nav is in actual HTML text. This speeds up page loading (as the browser does not have to go 5 times to get each nav menu item), and also helps with SEO and the links have actual text names.

  • Markas

    Beautiful little characters,Quick question, is
    there something in the script where I can edit the length of how long each
    image is displayed before it fades into the next one.works great.!!!<a href="http://www.freeonlinemessages.com/category/exam-messages/">exam messages</a>

  • Chloe

    Is it possible to make it an "on hover, then pause" function for when the slider slides automaticly?

  • jamos2600

    I love this. Beats the hell out of what I was using before.

    One tiny thing: the Web developer tools in  the new version of Firefox seem to be finding an error in  the code:

    [13:25:49.157] Error in parsing value for 'filter'.  Declaration dropped. @ http://localhost/services.html

    The counter on this error racks up about two dozen hits on each image transition. I don't know Javascript well enough to debug this.

  • flow

    i use this slideshow with 16 slides, every slide includes a picture (430px/430px) and some div boxes with text. the pagination includes thumbnails of the large pictures. this works fine in every browser, only IE is doing really slow fades. any suggestions?

  • I am using this script for my site. I have used transparent images. But when the banner slider is running it shows all the images used in li. How to show only the active image..Please reply as soon as possible. Also If possible mail me the reply at the email id.

  • Neo

    Can the script support pause / play feature?

  • Mojtaba_m2011

     Was great

  • Peter

    Is there a way to remove that script in html file and put it in fader.js and then make it start by placing in <body onLoad="func()". I am trying for 2 days now and I cant setup it that way. Is it possible and can you tell me how, im not that good at js?

  • Peter

    Is there a way to remove that script in html file and put it in fader.js and then make it start by placing in "". I am trying for 2 days now and I cant setup it that way. Is it possible and can you tell me how, im not that good at js?

  • Praveen

    Is there a way to get pagination in 1 of 9… 2 of 9 so on.. rather than a list from 1 to 9

  • Yashima yjt

    It working deficiency the initial advertisement frame after a little trial and error and also 2 slideshows on one page both now working! <a href="http://www.printingthestuff.com/brochures-printing">brochures printing</a> || <a href="http://www.printingthestuff.com/calenders-printing">calendars printing</a> || <a href="http://www.printingthestuff.com/cd-jacket-printing">cd cover printing</a>

  • The slideshow is so cool and superb.Thanks for sharing this post and I hope to see more of this elegant slideshow in javascript. Great post!

  • Nice Post. Its the main point to increase conversion which leads from many factors like good and engaging content, call to action, clear navigation, etc.