Foros del Web » Creando para Internet » CSS »

Imagen en EasySlider

Estas en el tema de Imagen en EasySlider en el foro de CSS en Foros del Web. Saludos, el asunto es que tengo una variación del "EASYSLIDER", basado en Jquery...El asunto es qeu las imagenes que tienen que deslizar (cambiar cada cierto ...
  #1 (permalink)  
Antiguo 21/10/2010, 17:13
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 15 años, 4 meses
Puntos: 3
Imagen en EasySlider

Saludos, el asunto es que tengo una variación del "EASYSLIDER", basado en Jquery...El asunto es qeu las imagenes que tienen que deslizar (cambiar cada cierto tiempo) no crecen con el contenedor que las posee.

He puesto #contslider img {width: 100%} pero nada....
y #slider img {width:100%} pero tampoco


Codigo CSS:

#contslider img { width:100%;}
#contslider{ border:solid #009933 1px; padding: 4px 4px 6px 4px; }

*///////////comienzo del slider //////////*/
img{border:none; }
pre{
display:block;
font:5px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:100%;
}


/* // image replacement */

#container{
margin:0 auto;
position:relative;
text-align:left;
width:505px;
height:100px;
background:#fff;
margin-bottom:2em;

}

#content{
position:relative;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

#slider{


margin: 0px 0px 0px 0px;
width:505px
}


#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:614px;
height:100px;
overflow:hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#nextBtn, #slider1next{
left:696px;
}


/* numeric controls */

ol#controls{
margin:5px ;
padding:0;
height:18px;
}
ol#controls li{
margin:0 5px 0 0;
padding:0;
float:left;
list-style:none;
height:18px;
line-height:8px;
}
ol#controls li a{
float:left;
height:18px;
line-height:18px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
margin-left:10px;
/*tamaño botones numericos*/
padding:0px 10px ;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // FIN Easy Slider */


Codigo HTML:

<div id="contslider">
<div id="slider">
<ul>
<li><a href="http://www.vinculoNumero1.ve" target="_blank"><img src="2010/imagenes/01.jpg" alt="Usa el Casco" width="614" height="100" border="0" /></a></li>

<li><a href="archivos/proceso.pdf" target="_blank"><img src="2010/imagenes/02.jpg" alt="Periodo 2010-2" width="614" height="100" border="0" /></a></li>

<li><a href="http://www.vinculoNUmero3.com" target="_blank"><img src="2010/imagenes/03.jpg" alt="Estudio" width="614" height="100" border="0" /></a></li>

<li><a href="dependencias/secgral/aseuny.html" target="_blank"><img src="2010/imagenes/04.jpg" alt="Asociación" width="614" height="100" border="0" /></a></li>

<li><a href="archivos/hps/seleccionHPS.gif" target="_blank"><img src="2010/imagenes/05.jpg" alt="Carrera" width="614" height="100" border="0" /></a></li>
</ul>
</div>
</div>
  #2 (permalink)  
Antiguo 22/10/2010, 08:43
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 15 años, 4 meses
Puntos: 3
Respuesta: Imagen en EasySlider

COmo veran las imagenes miden 614 px de ancho y 100px de alto, lo que quiero hacer es que cuando el contenedor (#contslider) de la imagen crezca, las imagenes que este contiene se estiren adaptandose a la nueva dimensión, por eso puse #contslider img {width: 100%}, de hecho hago lo mismo con el header y si se pone la img al 100%. Pero dentro del Slider no....


Bueno seguiré viendo, leyendo y aprendiendo.....
  #3 (permalink)  
Antiguo 22/10/2010, 10:19
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Imagen en EasySlider

Eso no se puede hacer, a no ser de que a cada una de las imágenes le modifiques los atributos height y width. Lo que podrías hacer es mediante javascript es calcular el tamaño del div contenedor y a partir de ahí hacer todo el proceso aunque no te lo recomiendo... es mejor que trabajes con las imágenes con su tamaño original.

Un saludo,
  #4 (permalink)  
Antiguo 04/11/2010, 04:36
Avatar de crea3d  
Fecha de Ingreso: septiembre-2010
Ubicación: Lima, Perú
Mensajes: 43
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: Imagen en EasySlider

Amigo eso ya esta resuelto en la siguiente dirección: http://www.digitalicon.es/blog/volviendo-fluido-easy-slider/

Luis Alva

Última edición por JavierB; 05/11/2010 a las 16:13 Razón: Borrar firma

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:45.