PDA

View Full Version : Centering a slide show



dechev002
06-26-2008, 04:31 PM
1) Script Title: dropin slideshow script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/dropitslide.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
06-26-2008, 04:46 PM
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
06-26-2008, 06:16 PM
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
06-26-2008, 06:23 PM
sorry that was my fault change


div#dropinslide

to


div.dropinslide

dechev002
06-26-2008, 06:32 PM
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
06-26-2008, 06:34 PM
Thank you so much for your help I truely appriciate it.

gerrygreenfees
09-24-2008, 12:39 AM
Ref:
http://www.dynamicdrive.com/dynamicindex14/dropitslide.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
09-24-2008, 05:51 AM
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]
}