Fade-in Slideshow: How do I get the photos next to each other

**windy!** · 09-16-2009, 09:01 PM

1) Script Title: Ultimate Fade-in Slideshow v2

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

3) Describe problem: Would like slide shows to appear next to each other rather than above/below. I've tried making the divs float left but it's not working. There must be some tiny error in my typing?
I'd appreciate advice as I can't move forward without figuring this out.
Thanks!

Code follows:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="generator" content="CoffeeCup Visual Site Designer, Version 6.0 Build 6 for Windows">

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

<!-- 
     This Website was created with CoffeeCup Visual Site Designer.
     Copyright 2009, CoffeeCup Software, Inc.
     http://www.coffeecup.com
//-->
<title> test site </title>

<style type="text/css">
</style>

<style type="text/css">
div.Object251 { position:absolute; top:79px; left:131px; width: 434px; z-index:0; }
div.Object251 table { width: auto; }
</style>

<!--html inserted by user -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>



<script type="text/javascript" src="fadeslideshow.js">



/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/



</script>



<script type="text/javascript">



var mygallery=new fadeSlideShow({

	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

	dimensions: [520, 430], //width/height of gallery in pixels. Should reflect dimensions of largest image

	imagearray: [

		["slides/hoodie-pink-530.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

		["slides/men-woman-jackets-520.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

		["slides/vail-coat-520.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: 800, //transition duration (milliseconds)

	descreveal: "ondemand",

	togglerid: ""

})





var mygallery2=new fadeSlideShow({

	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow

	dimensions: [220, 430], //width/height of gallery in pixels. Should reflect dimensions of largest image

	imagearray: [

		["slides/bora-brown-220.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

		["slides/serengeti-220.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

		["slides/mens-jacket-220.jpg"],

		["slides/malibu-coat-220.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: "always",

	togglerid: ""

})



</script>
<!--end of html inserted by user -->


<!-- centering -->

<style type="text/css">
body {
 margin: 0px;
 padding : 0px;
 text-align: center;
 height: 100%;
 width: 100%;
 background-color: #ffffff;
}


a:link {
 color: #8000ff;
}


a:visited  {
 color: #ff0000;
}

</style>
<!-- --------- -->



<!-- centering -->
<style type="text/css">
#container { position:relative; margin: 0px auto 0 auto; height: 100%; width:800px; text-align:left; padding-left:0px;}
</style>


<!-- centering -->
<!-- --------- -->

</head>

<body  >


<!-- centering -->
<div id="container">
<!-- --------- -->

<div id="background" style="position:relative; top:0px; left:0px; z-index:0;">
<table style="height:900px; background-color:#ffffff;" width="800" border=0 cellspacing=0 cellpadding=0>
<tr>
<td>
<br>
</td>
</tr>
</table>
</div>

<div class="Object251"><div id="fadeshow1" style="float: left;" ></div>





 <div id="fadeshow2" style="float: left;" ></div>[/COLOR]



</div>
</div>
<!-- --------- -->



</body>

</html>

**ddadmin** · 09-17-2009, 06:10 AM

The main container of each Slideshow is relatively positioned, so getting them to appear side by side would be like doing so for any such container. One way would be to create two floating DIVs that appear side by side, and inside each DIV, place one slideshow in it, ie:

Code:

<div style="float:left; width:500px">
slideshow 1 HTML here
</div>

<div style="float:left; width:500px">
slideshow 2 HTML here
</div>

**windy!** · 09-17-2009, 10:59 AM

It worked! Thank you. When I add a br or nbsp it makes the show on the right move down. Is there a way to just add some space between.

Thanks again!

Thread: Fade-in Slideshow: How do I get the photos next to each other

Thread Tools

Search Thread

Fade-in Slideshow: How do I get the photos next to each other

got divs side by side, how to get a space between

Bookmarks

Bookmarks

Posting Permissions