Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/09/2011, 16:02
Avatar de agapornis
agapornis
 
Fecha de Ingreso: julio-2011
Ubicación: Madrid
Mensajes: 125
Antigüedad: 13 años, 4 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