Ultimate Fade-In Show help please

  • 2
  • Question
  • Updated 10 years ago
  • Answered
I grabbed the script for this slideshow off of Dynamic Drive. At first I had used really small images to test drive my slideshow. Then, I uploaded bigger-sized images which is when I ran into some problems. My images were getting cut off. I figured out how to make the slideshow box bigger but now my images are all left aligned instead of in the center.

Can anyone point out where to add a code to center my images?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
  • just wanting to get this thing going.

Posted 10 years ago

  • 2
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Are you are using the same slideshow as me, Littleus.
My images are quite large. I also have not tried it with
different size images.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I think it might be the same Boomer. It just doesn't make sense to me. Initially I used like 100px sized photos and they were centered. But as soon as I go to the larger size, it's not centered any more.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I should add that I'm using this inside of a div table.
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Do you have a link to the script?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I've managed to center the photos using the padding attribute. However, it's not that great as some images are bigger than others. I wish I could somehow make the div table dynamically change as the size change. I'll post the script down below.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
lu place a immediately prior to your script tag.

I say that based on my experience the other day and it fixed a similar problem. The <!--<align center>--> within the Div statement had no effect. The default is Left aligned as you would have gathered, why it apparently moved is probably because of the dimensions setup initially and they just were optimised for that size.

If it works it will be lucky. Good luck on this. It's an aaaarghhh feature of styles :)
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
You've done that in effect with the divclass center div. I don't know lu. Sorry.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I don't know what happened to my comment but... anyway... in case you did not see it the first time...thanks Peter for your suggestion. I even tried taking out the div class center div and just using plain ol' align=center... to no avail. I did manage to use the padding trick but it's just not exactly what I wanted. Oh well... I'll either have to make scrap using horizontal & vertical images or think of something else.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Littleus,
Here's the link to the slideshow I'm using: http://www.dynamicdrive.com/dynamicin...
Mine is also in a DIV : http://helderberg.cc/
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yep.. that's the one I was using. I think the problem is as you mentioned below is using the same sizes. I guess I'm gonna have to scrap the horizontal and vertical images and just go with one of 'em.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
<!--<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["http://dejavuapparel.yolasite.com/res..., "", ""] //plain image syntax
fadeimages[1]=["http://dejavuapparel.yolasite.com/res..., "", ""] //plain image syntax
fadeimages[2]=["http://dejavuapparel.yolasite.com/res..., "", ""] //image with link syntax
fadeimages[3]=["http://dejavuapparel.yolasite.com/res..., "", ""] //image with link and target syntax
fadeimages[4]=["http://dejavuapparel.yolasite.com/res..., "", ""] //image with link and target syntax

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+';height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>-->

The body part:

<!--<style type="text/css"> .centerdiv{ /*IE method of centering a relative div*/ text-align: center; } .centerdiv>div{ /*Proper way to center a relative div*/ margin: 0 auto; } </style> <body> <div style="border: 1px solid black; padding: 10px; background-color: rgb(93, 196, 211); text-align: center;"><font size="3"><b>WHAT'S NEW!<br></b></font></div> <div style="border-style: none solid solid; border-color: -moz-use-text-color black black; border-width: 0px 1px 1px; padding-left: 125px; padding-top: 10px; padding-bottom: 10px;"> <div class="centerdiv"><script type="text/javascript"> //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder) new fadeshow(fadeimages, 250, 225, 0, 3000, 1, "R") new fadeshow(fadeimages2, 250, 225, 0, 3000, 0) </script> </div> </body></div></div>-->
Photo of MKB

MKB

  • 53 Posts
  • 0 Reply Likes
How come I can't get that code to work in Firefox?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You should be able to! Perhaps you have implemented the code incorrectly? I would suggest going to either http://yolacodes.yolasite.com to grab the code (please read the rules first) and look under "Slideshow". Or you can go to Dynamic Drive and obtain the code there - http://www.dynamicdrive.com/dynamicin...

Please let us know if you need further help.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
A work around would be to make all your images the same size.
The smaller pic's could have a white background to the same size
as the larger ones ;-)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
But my problem is I have some portrait style pictures and some landscape pictures. I guess maybe I'm just gonna have to go with one type of style then, eh?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
You're always trying to push the envelope, Littleus ;-)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I know.. I'm such a trouble-maker! =P
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Last gasp!

Can you add the tag <!--<center>-->

just before the script tag. Don't worry about removing anything to do it. Cross your fingers, close your eyes, turn on Beethoven loud or a Tibetan Om and hope....... I don't know but sometimes.....

it should balance the karma if nothing else :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I think I've ran out of oxygen!!! There's a DNR on this code. I'm sorry to announce that at 4:17pm, EST, that the centering code for this script has suffered massive failure. We've tried various method to resuscitate this code but our attempts were sadly did not work. Thanks to all who lent their expertise on this matter.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
RIP +
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Littleus try this:

<!--

<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>

-->

Its CSS - you know what to do - html widget high on the page.

It may or may not work - good luck - Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Duke

Thanks for the suggestion. I no longer have the slideshow now but the next time I do, I'll try it out!