Center Image In Ultimate Slideshow 2.4

[musicmed]

Right now the ultimate shideshow 2.4 div shows the image aligned top-left. I want it aligned center-middle and trim off the sides, top and bottom as needed. Is that possible?

.css({position:'absolute', left:0, top:-100, width:'100%', height:'100%', background:'black'})

If i adjust the top and left in this line of the js i can change where the image is placed but then it messes up the other images. I just want all images centered in the div.

[jscheuer1]

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.

Unless you're trying for something unusual, the slideshow centers the images automatically as long as you set up the dimensions correctly in the on page call and have no centering that interferes with the slideshow layout, ex:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //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: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

The instructions there are a little too minimal. The width (the first number) should be the width of the widest image. The height (the second number) should be the height of the tallest image. These might not necessarily be the same image. Also you can set it wider or taller, that's up to you, but they must be at least as large as indicated.

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.

[musicmed]

Thanks for the quick reply! I dont know how wide or high these images will be. They are loading via a cms system / sql. My user is updating these images all the time and there's no way to adjust the parameters for every new image.

The slideshow is in the header of this site: http://www.debbiemelvin.com/index2.php

[jscheuer1]

I'd suggest looking into cropping or resizing them on the server side.

Another thing you could try is having the browser resize them.

First though, you have a syntax error that breaks the script in IE 8 and less:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [696, 288], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["/admin/uploads/Wrencrest_182.jpg", "http://www.debbiemelvinsearch.coldwellbankerbarnes.com/default.cfm/page/forsale/cat/display/mlsid/mls_midtennessee/propertytype/residential/ml_number/1273757/referer/Search%20Results.htm", "listings", "<b>1221 Cooks Rd</b><br>$309,000"],
    	["/admin/uploads/26_Beacon_Hill_011.jpg", "", "listings", "<b>2150 FM Rd 79</b><br>$91,000"],
    	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})
</script>

Other browsers error correct for this. See the red comma? Remove it.

Now, about having the browser resize the images. Put this in the stylesheet:

#fadeshow1 .gallerylayer img {
	max-width: 696px;
	max-height: 288px;
}