Click here to Skip to main content
15,564,475 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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)
})
Posted
Updated 29-Jan-19 10:36am
Comments
MadMyche 28-Jan-19 15:58pm    
What browser?
Member 10850253 28-Jan-19 16:11pm    
I tried in IE, Edge, Firefox and Chrome and it didn't work in anyone of them.

1 solution

Note As of Windows Internet Explorer 9 this feature was deprecated. As of Internet Explorer 10 this feature was removed and should no longer be used.

The code you're trying to use will only work in IE8 or earlier.

Google will find you plenty of examples of image slideshows which work in all modern browsers. For example:
Crossfading Images | CSS transitions, CSS transforms and CSS animation[^]
 
Share this answer
 
Comments
Member 10850253 29-Jan-19 16:10pm    
I found this alternative, but I don't know how to implement it.
https://stackoverflow.com/questions/25347946/add-fade-effect-in-slideshow-javascript[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900