Centering a slide show

[dechev002]

1) Script Title: dropin slideshow script

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

3) Describe problem: I would like to center the slideshow on the webpage, I am new at this and don't know scripting too well so I don't know what to put in to make the slideshow centered.

[boogyman]

the script says to use

<script type="text/javascript">

//Define Image Array. Syntax: ["image_path", "url_destination", "url_target"]
var myimages=new Array()
myimages[0]=["photo1.jpg", "", ""]
myimages[1]=["photo2.jpg", "http://www.dynamicdrive.com", ""]
myimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"]

//Create new drop-in slideshow
//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
new dropinslideshow(myimages, 200, 250, 3000)

</script>

to create the actual slideshow... but we need to add an extra little bit piece and some CSS styles to achieve the centered look

<style type="text/css">
<!-- 
div#dropinslide {
     margin: 0 auto;
     width: ___px;
}
// -->
</style>

<div class="dropinslide">
<script type="text/javascript">

//Define Image Array. Syntax: ["image_path", "url_destination", "url_target"]
var myimages=new Array()
myimages[0]=["photo1.jpg", "", ""]
myimages[1]=["photo2.jpg", "http://www.dynamicdrive.com", ""]
myimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"]

//Create new drop-in slideshow
//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
new dropinslideshow(myimages, 200, 250, 3000)

</script>
</div>

[code]
note that what ever you put for the width of the dropshowin

...
you need to put that same number in your css styles

width: ___px;

[dechev002]

Thank you for the help, I added the script and put in the correct width but it is still not centered. I am thinking the issues might have something to do with the margin but not sure what I need to do. Can you please help me on this again? My website is www.boricuababies.com and if you click on the Juan and Diana sail you will see the slideshow towards the bottom.

[boogyman]

sorry that was my fault change

div#dropinslide

to

div.dropinslide

[dechev002]

Nope didn't work...should I create a table with 3 collumns and put it within the center collumn? Then manipulte the cell or table properties?

[dechev002]

Thank you so much for your help I truely appriciate it.

[gerrygreenfees]

Ref:
http://www.dynamicdrive.com/dynamici...ropitslide.htm

My code:
http://greenfees.com/bdrop.htm
http://www.greenfees.com/dropin/dropinslideshow.js

Problem:
Images are cut off and located to the right in IE
All other browsers are ok.
I have read all posts and tried everything.

Action:
Please look at my code and tell me where I went wrong?
I pretty much used the vanilla version as you can see.

Thanks

[gerrygreenfees]

I found a fix on the Forum -
This is what fixed it
div style="position:absolute; left:0;

See below:

}


dropinslideshow.prototype.createcontainer=function(w, h){
document.write('<div id="'+this.id+'" style="position:relative; width:'+w+'px; height:'+h+'px; overflow:hidden">')
document.write('<div style="position:absolute; left:0; width:'+w+'px; height:'+h+'px; top:0;"></div>')
document.write('<div style="position:absolute; left:0; width:'+w+'px; height:'+h+'px; top:-'+h+'px;"></div>')
document.write('</div>')
this.slideshowref=document.getElementById(this.id)
this.canvases=[]
this.canvases[0]=this.slideshowref.childNodes[0]
this.canvases[1]=this.slideshowref.childNodes[1]
}