Ultimate Fade-in slideshow (v2.4)-Image Not Centered when resizing

[nickcode]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): Ultimate Fade-in Show (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)

3) Describe problem: When I go to resize the forum the black spaces in between are uneven. I need to fix this here is my code so far

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: 260,190, //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: true, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
});</script>

Please help! Thanks in advance

[jscheuer1]

This script doesn't resize your images. It will mat them if you specify a size for the show that's larger than the images or some of the images. In which case, on a standards compliant page, the mat will be even unless you do something to prevent that.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[nickcode]

First this is the link to my website My Website (http://eclipsetintingctl.com/photo.html)
If you look at that photos page I havent yet changed any of the pictures or any of the settings. I need it to center the image inside the Blackness.

[jscheuer1]

OK, your page invokes standards compliance. But you have something that prevents the slideshow from automatically centering the mat. What you need to do is remove the deprecated align="center" from the td tag here (I have no idea what that green comment means, it too can be safely removed):


<td align="center" width="60%" bgcolor="white" valign="baseline"><br />
<!--- Start of Body --->
<div id="fadeshow1"></div><br />
</td>

But then the slideshow will not be centered in the td. To fix that you can add margin: 0 auto; to it as inline style, or preferably in a stylesheet (here shown inline and highlighted), so you will have:


<td width="60%" bgcolor="white" valign="baseline"><br />
<div style="margin: 0 auto;" id="fadeshow1"></div><br />
</td>

Note: Make sure to clear the browser's cache while no instance of the browser is open to the page to make sure your changes have taken effect. Simply refreshing may be all that's required, if even that.

If there are still problems, update the live page and I'll have another look at it.

[nickcode]

:( it didnt work so far... I Changed the code like you told me to...

<td width="60%" bgcolor="white" valign="baseline"><br />
<div style="margin: 0 auto" id="fadeshow1"></div><br />
</td>
I need it to center in the black space.
Again Thanks in Advance
The link to my website again is Here (http://eclipsetintingctl.com/photo.html)

[jscheuer1]

Ooops. There's also a <center> tag influencing that in some browsers (not the one I tested in), as well as a table with align="center" influencing it in at least one browser. As a rule of thumb one shouldn't use those types of things when laying out a standards compliant page. But I just missed them, sorry.

It looks as though those could be removed safely. But to be on the safe side, just add the highlighted to what you already have:


<td width="60%" bgcolor="white" valign="baseline"><br />
<div style="margin: 0 auto; text-align: left;" id="fadeshow1"></div><br />
</td>

Notes: This will cause the text in the descriptions that slide in from the bottom of the images on hover to align left. If that's a problem, we can make them be centered again by adding style in the head or in an external stylesheet. The above added inline styles for the fadeshow1 div can be placed in the head or in an external stylesheet as well, and generally that's to be preferred, though functionally makes no difference to this one page.

[nickcode]

Thanks a MILLION that helped alot... I also found that my code is rather messy if you may have guessed I am new to this business... I must not have ended the <center> tag so it put it at the end. Thanks alot! :cool: