Image transitions on my website are not working. The image only flickers and then changes, but I don't know how to make this code work. I got this code online, and its supposed to work on internet explorer, but I tried in IE, Firefox, Edge, and chrome, and it doesn't work on none of these browsers.
Please let me know how I can fix this.
This is the site I am working on:
cosecha-verde.000webhostapp.com
Thanks.
What I have tried:
<pre>var 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()",
"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.wrapperid
this.imagearray=setting.imagearray
this.pause=setting.pause
this.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play()
this.currentimg=0
var preloadimages=[] //temp array to preload images
for (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+'">'+this.getSlideHTML(this.currentimg)+'</div>')
var effectindex=Math.floor(Math.random()*global_transitions.length) //randomly pick a transition to utilize
var wrapperdiv=document.getElementById(this.wrapperid)
if (wrapperdiv.filters){ //if the filters[] collection is defined on element (only in IE)
wrapperdiv.style.filter=global_transitions[effectindex] //define transition on element
this.pause+=setting.transduration //add transition time to pause
}
this.filtersupport=(wrapperdiv.filters && wrapperdiv.filters.length>0)? true : false //test if element supports transitions and has one defined
var slideshow=this
setInterval(function(){slideshow.rotate()}, this.pause)
}
flashyslideshow.prototype.getSlideHTML=function(index){
var slideHTML=(this.imagearray[index][1])? '<a href="'+this.imagearray[index][1]+'" target="'+this.imagearray[index][1]+'">\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 wrapperdiv=document.getElementById(this.wrapperid)
this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0
if (this.filtersupport)
wrapperdiv.filters[0].apply()
wrapperdiv.innerHTML=this.getSlideHTML(this.currentimg)
if (this.filtersupport)
wrapperdiv.filters[0].play(this.transduration)
}
var flashyshow=new flashyslideshow({ //create instance of slideshow
wrapperid: "myslideshow", //unique ID for this slideshow
wrapperclass: "flashclass", //desired CSS class for this slideshow
imagearray: [
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL10_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL11.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL12_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL13_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL14_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL15_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL16_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL17.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL18_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL19.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL22_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL24_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL25_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL26_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL27_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL28.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL29_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL30.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL31_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL32.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL33_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL34.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL35_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL6_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL7_1.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL8.jpg",""],
["https://cosecha-verde.000webhostapp.com/images/Logros-2016-2017//GL9_1.jpg",""]
],
pause: 2000, //pause between slides (milliseconds)
transduration: 1000 //transition duration (milliseconds)
})