Image sizing in Continuous Reel Slideshow

[erdem]

1) Script Title: Continuous Reel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lslideshow.htm

3) Describe problem:

Please check lapaz.com.tr

My images have a width of 1920px. I want to use them full screen and accept that the biggest screen will have this resolution.
But the images are cut on less resolution screens.

Is there a way to resize the image after getting the actual dimensions of the browser?

[ddadmin]

This may not suffice in accomplishing what you need, but try out the below modified .js file. It does the following to the .js file:

1) Adds the code in red to the output markup so that each image scales to 100% the dimensions of the main Reel container:

		var layerHTML=(imgref[1])? '<a href="'+imgref[1]+'" target="'+imgref[2]+'">' : '' //hyperlink slide?
		layerHTML+='<img src="'+imgref[0]+'" style="border-width:0; width:100%; height:auto" />'
		layerHTML+=(imgref[1])? '</a>' : ''
		return '<div class="slide" style="position:absolute;'+posstr+';width:100%;height:100%;text-align:center;">'

2) Adds a onwindowresize() custom event handler, which you can make use of in the initialization code. Using it, you can reset the dimensions of the Reel container to the appropriate size each time the window is resized, for example:

var docwidth = window.innerWidth || document.documentElement.clientWidth
var docheight = window.innerHeight || document.documentElement.clientHeight

var firstreel=new reelslideshow({
	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
	dimensions: [docwidth, docheight], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
	orientation: "h", //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 300, //transition duration (milliseconds)
	onwindowresize:function(wrapper){
		var docwidth = window.innerWidth || document.documentElement.clientWidth
		var docheight = window.innerHeight || document.documentElement.clientHeight
		wrapper.css({width:docwidth , height:docheight })
	}
})

[erdem]

Worked thank you very much.

Any comment to IE problem to here?

http://www.dynamicdrive.com/forums/s...ad.php?t=67269