Estoy usando Supersized no se si lo conocen. Este
El tema es que en Mozilla, Opera y Chrome si ve bien, pero en IE 6 y 7 no se ve nada. Dejo el codigo html que estoy usando:
Código :
<!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>
<title>Prueba</title>
<link rel="stylesheet" href="estilo.css" type="text/css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 1,
slideshow: 1,
navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 1,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000
};
$('#supersize').supersized();
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
color:#8FC2FF;
text-decoration: none;
outline: none;
}
a:hover{
text-decoration: underline;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}
#content{
margin:0px auto;
height:100px;
width:100%;
bottom:5%;
z-index: 3;
position:absolute;
}
#contentframe{
overflow: hidden;
border-top:solid 0px #4F4F4F;
border-bottom:0px solid #000;
height: 100%;
text-align:left;
z-index: 3;
}
#slidecounter{
float:left;
color:#4F4F4F;
font:50px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:18px 20px;
}
#slidecaption{
overflow: hidden;
float:left;
color:#FFF;
font:26px "Helvetica Neue", Arial, sans-serif;
font-weight:bold;
margin:33px 0;
}
/*Supersized Stamp*/
.stamp{
float: right;
margin: 25px 20px 0 0;
}
/*Supersize Plugin Styles*/
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 1000;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url(images/progress.gif);
}
#supersize{
position:fixed;
}
#supersize img, #supersize a{
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize .prevslide, #supersize .prevslide img{
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img{
z-index: 2;
}
</style>
<style type="text/css">
<!--
.Estilo1 {color: #333333}
-->
</style>
</head>
<body>
<div id="loading"> </div>
<div id="supersize">
<a href=""><img src="imagenes/01/uno.jpg" title=""/></a>
<a href=""><img src="imagenes/01/dos.jpg" title=""/></a>
<a href=""><img src="imagenes/01/tres.jpg" title=""/></a></div>
<div id=flechauno>
<a href="#" id="prevslide"><img src="imagenes/back_dull.gif" width="90" height="66" /></a>
</div>
<div id=flechados>
<a href="#" id="nextslide"><img src="imagenes/forward_dull.gif" width="90" height="66" /></a></div>
</body>
</html>En ie no me muestra la img al 100% y me corre de lugar las flechas que les asigne como next y prev.
Dejo los archivos para bajar ACA!
Espero que alguien me de una ayuda. Gracias
Saludos.
