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 to download the source code.
9/30/2010 – Resolved IE bug.
February 24, 2013
February 3, 2013
Welcome back Michael, you have been missed!
This script looks great, another TINY script to add to the already awesome list.
Thanks!
glad you are back online! – have been hankering for some more TINY magic..
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).
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
Very nice script. It is scripts exactly like this that make life easier for web developers. Thank you so much!
This is nice, I'm gonna try it today.
Great compact script again, with great features to boot, will definitely keep this in mind for projects.
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
How can we pause it on hover?
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&
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.
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
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.
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!
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.
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
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
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!
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
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!
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?
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
Any way to have Play / Stop buttons?
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 ?
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.
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!!
hi. i have a problem with using tiny fader with tiny slider. one of them are not working. how can i fix this?
thanks.
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
Have you found a solution to this?
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?
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.
I'm trying to pause it as well. Yes, you can add more items.
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';
}
Any way to reset the opacity to zero if it is not the current slide?
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}
}();
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
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
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.
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?
check out this thread for the solution: http://www.codingforums.com/showthread.php?p=1108074#post1108074
Has anyone worked out a way to add a pause feature to this yet? only thing it's missing.. thanks in advance..
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?
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>
duuh. I removed this line
navid:'pagination',
and now it works just fine…
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?
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?
Figured out the first issue…now it seems to be floating above my content!
How do I anchor it into a place?
Thanks a lot!
wtih a try and catch
<a
href="http://widilaptopreview.com/2011/10/compaq-15-6-cq56-109wm-laptop-pc-review/">compaq
cq56 109wm laptop</a>
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.
great info. thanks for sharing
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
I likes it
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..!!
Nice article.Thank you for sharing.
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.
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.
cool….no wonder!!
What would be nice if the buttons on the bottom were centered.
Thank you for the code
Just use left margin to change that.
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
put*
Great article.I love this.
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.
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.
Thanks a lot Aaron. I was looking for this one.
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).
, can you help? If U need the URL, I'll send 
It is a css issue which I can't figure out
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()}
Hi Julian,
please visit http://www.scriptiny.com/qa/2460/can-i-change-ul-li-in-the-html-of-tinyfader for the answer
This is really really cool.
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!!!
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;
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});
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.
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?
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?
It is very nice and useful for me…..
Thank you…
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?
can help me. custom
I want play all image after that stop.
<a>
I added this slideshow here – <a href="http://www.jeyjoo.com">Jeyjoo.com</a>, 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.
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>
Is it possible to make it an "on hover, then pause" function for when the slider slides automaticly?
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.
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.
Can the script support pause / play feature?
Was great
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?
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?
Is there a way to get pagination in 1 of 9… 2 of 9 so on.. rather than a list from 1 to 9
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!