Full version: jsB@nk » Image » Slideshow » Simple Random Picture Transitions Slideshow
URL: https://www.javascriptbank.com/simple-random-picture-transitions-slideshow.html
This free JavaScript slideshow code will bring 1 of 17 randomly chosen transitional effects to every picture in IE browsers. In the others, a custom fading transition effect is applied. You can set hyperlink and a text description for each image, and the slideshow will pause when the user moves the mouse over it.
Full version: jsB@nk » Image » Slideshow » Simple Random Picture Transitions Slideshow
URL: https://www.javascriptbank.com/simple-random-picture-transitions-slideshow.html
<style type="text/css">.flashclass{ /*sample CSS class added to image slideshow container*/width: 200px; /*a width should be defined for transition to work*/border: 5px solid orange;padding: 5px;}.flashclass img{border-width: 0;}</style><script type="text/javascript" name="transitionshow.js">/************************************************ Random Transitions Slideshow- by JavaScript Kit (www.javascriptkit.com)* This notice must stay intact for usage* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code***********************************************///Random Transitions Slideshow- By JavaScript Kit (http://www.javascriptkit.com)//Created: Nov 3rd, 2008var global_transitions=[ //array of IE transition strings"progid:DXImageTransform.Microsoft.Barn()","progid:DXImageTransform.Microsoft.Blinds()","progid:DXImageTransform.Microsoft.CheckerBoard()","progid:DXImageTransform.Microsoft.Fade()","progid:DXImageTransform.Microsoft.GradientWipe()","progid:DXImageTransform.Microsoft.Inset()","progid:DXImageTransform.Microsoft.Iris()","progid:DXImageTransform.Microsoft.Pixelate(maxSquare=15)","progid:DXImageTransform.Microsoft.RadialWipe()","progid:DXImageTransform.Microsoft.RandomBars()","progid:DXImageTransform.Microsoft.RandomDissolve()","progid:DXImageTransform.Microsoft.Slide()","progid:DXImageTransform.Microsoft.Spiral()","progid:DXImageTransform.Microsoft.Stretch()","progid:DXImageTransform.Microsoft.Strips()","progid:DXImageTransform.Microsoft.Wheel()","progid:DXImageTransform.Microsoft.Zigzag()"]function flashyslideshow(setting){this.wrapperid=setting.wrapperidthis.imagearray=setting.imagearraythis.pause=setting.pausethis.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play()this.currentimg=0var preloadimages=[] //temp array to preload imagesfor (var i=0; i<this.imagearray.length; i++){preloadimages[i]=new Image()preloadimages[i].src=this.imagearray[i][0]}document.write('<div id="'+this.wrapperid+'" class="'+setting.wrapperclass+'"><div id="'+this.wrapperid+'_inner" style="width:100%">'+this.getSlideHTML(this.currentimg)+'</div></div>')var effectindex=Math.floor(Math.random()*global_transitions.length) //randomly pick a transition to utilizevar contentdiv=document.getElementById(this.wrapperid+"_inner")if (contentdiv.filters){ //if the filters[] collection is defined on element (only in IE)contentdiv.style.filter=global_transitions[effectindex] //define transition on elementthis.pause+=setting.transduration //add transition time to pause}this.filtersupport=(contentdiv.filters && contentdiv.filters.length>0)? true : false //test if element supports transitions and has one definedvar slideshow=thisflashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=1}, "mouseover")flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=0}, "mouseout")setInterval(function(){slideshow.rotate()}, this.pause)}flashyslideshow.addEvent=function(target, functionref, tasktype){if (target.addEventListener)target.addEventListener(tasktype, functionref, false);else if (target.attachEvent)target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});},flashyslideshow.setopacity=function(el, degree){ //sets opacity of an element (FF and non IE browsers only)if (typeof el.style.opacity!="undefined")el.style.opacity=degreeelseel.style.MozOpacity=degreeel.currentopacity=degree},flashyslideshow.prototype.getSlideHTML=function(index){var slideHTML=(this.imagearray[index][1])? '<a href="'+this.imagearray[index][1]+'" target="'+this.imagearray[index][2]+'">\n' : '' //hyperlink slide?slideHTML+='<img src="'+this.imagearray[index][0]+'" />'slideHTML+=(this.imagearray[index][1])? '</a><br />' : '<br />'slideHTML+=(this.imagearray[index][3])? this.imagearray[index][3] : '' //text description?return slideHTML //return HTML for the slide at the specified index}flashyslideshow.prototype.rotate=function(){var contentdiv=document.getElementById(this.wrapperid+"_inner")if (this.isMouseover){ //if mouse is over slideshowreturn}this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0if (this.filtersupport){contentdiv.filters[0].apply()}else{flashyslideshow.setopacity(contentdiv, 0)}contentdiv.innerHTML=this.getSlideHTML(this.currentimg)if (this.filtersupport){contentdiv.filters[0].play(this.transduration)}else{contentdiv.fadetimer=setInterval(function(){if (contentdiv.currentopacity<1)flashyslideshow.setopacity(contentdiv, contentdiv.currentopacity+0.1)elseclearInterval(contentdiv.fadetimer)}, 50) //end setInterval}}/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><script type="text/javascript">var flashyshow=new flashyslideshow({ //create instance of slideshowwrapperid: "myslideshow", //unique ID for this slideshowwrapperclass: "flashclass", //desired CSS class for this slideshowimagearray: [["http://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Maceio_Alagoas_Brasil.PNG/180px-Maceio_Alagoas_Brasil.PNG", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],["http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Windbuchencom.jpg/250px-Windbuchencom.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],["http://tbn3.google.com/images?q=tbn:RaCzed35eJ1SvM:http://i28.photobucket.com/albums/c250/HoChinhMi/TypicalDutchSpring__byjaaphart-Jaap.jpg", "", "", "Flowers spring back to life in Spring."],["http://tbn1.google.com/images?q=tbn:UcU1K0a02oP52M:http://www.autumn-pictures.com/new-jersey-autumn8.jpg", "", "", "Ah the cool breeze of autumn."]],pause: 2000, //pause between content change (millisec)transduration: 1000 //duration of transition (affects only IE users)})</script>