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:
Por otra parte según comentan en el tutorial he añadido este código en la etiqueta head de la plantilla:/*============================*/
/*=== 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;
}
/*=== 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;
}
Cita:
Y por último he introducido el código para el Slider en el cuerpo de la plantilla, el head de este modo:<!-- 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>
<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>
Cita:
Mi pregunta es....porqué no carga el slider dentro de la web.<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>
<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>
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!