Bueno no sabía muy bien donde poner este tema asique me disculpo si esta en el lugar equivocado.
He implementado el plugin Lightshow, visor de fotos con slideshow en una página web. Funcionar funciona, pero las imágenes que trae para avanzar imagenes, el .gif que sale mientras cargan, el botón de cerrar, etc. no cargan.
Os comento como tengo colocadas las cosas:
- El plugin funciona en el archivo trabajos.php, en la misma ruta que ese archivo tengo los archivos:
AC_RunActiveContent.js, effects.js, lightbox.js, prototype.js, scriptaculous.js que trae el plugin.
- El CSS del plugin lo he metido en mi hoja de estilos, que está ubicada en
css/index.css, el código es el siguiente:
Código:
#lightbox{
position: absolute;
top: 20px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
color:#151410;
}
#lightbox a, #lightbox a:hover {
border-bottom:none;
color:#151410;
text-decoration:underline;
}
#lightbox a img{ border: none; }
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#loadingLink {
display:block;
margin:0 auto;
padding:0;
width:32px;
height:32px;
background:url("images/loading.gif") center center no-repeat;
text-indent:-9999px;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLinkImg, #nextLinkImg{
width: 49%;
height: 100%;
background: transparent url("images/blank.gif") no-repeat; /* Trick IE into showing hover */
display: block;
text-indent:-9999px;
}
#prevLinkImg { left: 0; float: left;}
#nextLinkImg { right: 0; float: right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover { background: url("images/prevlabel.gif") left 15% no-repeat; }
#nextLinkImg:hover, #nextLinkImg:visited:hover { background: url("images/nextlabel.gif") right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}
#imageData{
padding:0 10px;
}
#imageDetails{ width: 70%; float: left; text-align: left; }
#caption{ font-weight: bold; }
#numberDisplay{ display: block; clear: left; }
#detailsNav{ display: block; clear: left; padding:0 0 10px 0; }
#prevLinkDetails { margin:0 8px 0 0; }
#nextLinkDetails { margin:0 8px 0 0; }
#closeLink {
display:block;
margin:0;
padding:0 0 10px 0;
text-decoration:none;
float:right;
width:66px;
height:28px;
background:url("images/closelabel.gif") no-repeat;
text-indent:-9999px;
overflow:hidden;
}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #151410;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
- Y las imágenes que os comentaba, las he metido en
images/
Veis algo mal? Alguna ruta? Help! :(