PDA

View Full Version : ¿How to duplicate a slideshow?


Rombur
09-24-2016, 11:47 AM
HI friends,

I need to know how to duplicate a slideshow in a web, using Dreamweaver CS4.

Below is the code, as you can see, is a very simple web, it has only a table centered with two adDiv:

apDiv1 (wich has the slideshow) and apDiv2 (where I need the same slideshow)





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}

.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
</style>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
}
-->
</style>
</head>

<body>
<table width="1000" border="0" align="center">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><div id="apDiv1"><ul class="ppt">
<li><img src="C:\Users\Tomás\Desktop\prueba copia\f.jpg" alt="descripción 1"></img></li>
<li><img src="C:\Users\Tomás\Desktop\prueba copia\Down HD.jpg" alt="descripción 2"></img></li>
<li><img src="C:\Users\Tomás\Desktop\prueba copia\linea.jpg" alt="descripción 3"></img></li>
</ul><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');

var cur = $('.ppt li:first');

function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}

$(function() {
setInterval( "animate()", 5000 );
});
</script></div></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="80">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="92">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="279">&nbsp;</td>
<td><div id="apDiv2"></div></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

edbr
09-24-2016, 02:09 PM
so whats the problem?

Rombur
09-24-2016, 03:06 PM
so whats the problem?

I dont know how can I duplicate the same slideshow in "apDiv2". I try it but both slideshows shows in the same place. and extranges problems.

Rombur
09-24-2016, 03:08 PM
I think when both slideshows uses the same code, there are problems, I dont know I am very rookie.

edbr
09-24-2016, 07:37 PM
isee . you need to move one of the divs. you should be able to drag it but if not add top:200 ; to the cssfor one of them and you wil seperate them. your layout nerds thinking aboit though.

edbr
09-26-2016, 02:26 AM
ok im infront of a desktop now.

dont use tables for layout. you are in a early point of making a website so better to do it right from the start.
it is a fairly simple design as you say, but you really should be suaing relative positioning and using media queries to make the site viewable/readable.
not it is not .
be happy to help you if you dont get it