Foros del Web » Programando para Internet » Jquery »

Problema para crear Slider con Jquery

Estas en el tema de Problema para crear Slider con Jquery en el foro de Jquery en Foros del Web. Buenas a todos, He intentado implantar un slider en mi web basado en Jquery pero no sé que pasa que no cargan las imágenes. Lo ...
  #1 (permalink)  
Antiguo 07/09/2011, 16:02
Avatar de agapornis  
Fecha de Ingreso: julio-2011
Ubicación: Madrid
Mensajes: 125
Antigüedad: 13 años, 5 meses
Puntos: 7
Busqueda Problema para crear Slider con Jquery

Buenas a todos,

He intentado implantar un slider en mi web basado en Jquery pero no sé que pasa que no cargan las imágenes. Lo he hecho según el siguiente tutorial: http://www.htmldrive.net/items/show/...er-with-jQuery

Os cuento cómo lo he hecho. Primero me he descargado los archivos tales como las flechas, los marcos etc. del propio slider. Los he metido en un carpeta del tipo /images/slider/nombredearchivo.gif
También he metido en esa misma carpeta el archivo CSS del slider llamado "nivo-slider.css".
Entonces por una parte he añadido al código CSS de mi web lo siguiente a una altura media del documento CSS (no sé si estoy influirá):

Cita:
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper {
background:url(/images/slider/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}

#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(/images/slider/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(/images/slider/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(/images/slider/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
Por otra parte según comentan en el tutorial he añadido este código en la etiqueta head de la plantilla:

Cita:
<!-- Slider -->
<link rel="stylesheet" href="/images/slider/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>
Y por último he introducido el código para el Slider en el cuerpo de la plantilla, el head de este modo:

Cita:
<div id="slider">
<img src="/images/slider/nemo.jpg" alt="" />
<img src="/images/slider/toystory.jpg" alt="" title="Foto1" />
<img src="/images/slider/up.jpg" alt="" title="Foto2" />
<img src="/images/slider/walle.jpg" alt="" />
</div>
Mi pregunta es....porqué no carga el slider dentro de la web.

Ya de paso si conseguimos hacer que funcione me gustaría insertarlo nada más en la página principal por encima del título y debajo de la cabecera.

Saludos y gracias por adelantado!
__________________
Cría y selección del Agapornis fischer en Avifischeri
  #2 (permalink)  
Antiguo 09/09/2011, 06:41
Avatar de agapornis  
Fecha de Ingreso: julio-2011
Ubicación: Madrid
Mensajes: 125
Antigüedad: 13 años, 5 meses
Puntos: 7
Respuesta: Problema para crear Slider con Jquery

Por favor, necesito ayuda bastante urgente porque es algo que si me gustaría tenerlo hecho cuanto antes.

Saludos
__________________
Cría y selección del Agapornis fischer en Avifischeri
  #3 (permalink)  
Antiguo 11/09/2011, 03:31
Avatar de agapornis  
Fecha de Ingreso: julio-2011
Ubicación: Madrid
Mensajes: 125
Antigüedad: 13 años, 5 meses
Puntos: 7
Respuesta: Problema para crear Slider con Jquery

Alguna ayudita? Es bastante importante tenerlo hecho cuanto antes!

Saludos
__________________
Cría y selección del Agapornis fischer en Avifischeri

Etiquetas: html, javascript, js, slider
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 13:56.