No me funciona la lingtbox Hola buenas noches tras varios intentos de hacer un lightbox para mis fotos individuales, no consigo que salga, las fotos salen en una hoja aparte
tengo todos los códigos el la web y las carpetas el la raíz pero nada agradecería su alluda gracias de antemano espero su respuesta a ver si lo soluciono
comprobando en dw meda este error de css en los archivos externos que les pongo en rojo pero son copiados de la web oficila de lightbox
http://www.huddletogether.com/projects/lightbox2/#example
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />
y los archivos css externos son
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#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; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../image/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../image/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
la foto con el lightbox es
<a href="fotos/campo.jpg"rel="lightbox[roadtrip1]"><img src="fotos/campo200.jpg" width="200" height="131" /></a>
y mi codigo fuente es
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="shortcut icon" href="http://www.marbellasundevils.es/favicon.ico.ico">
<title> index</title>
<link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="index, follow" />
<META NAME="DESCRIPTION" CONTENT="Sitio dedicado al deporte del beisbol para niños">
<META NAME="KEYWORDS" CONTENT"beisbol,infatil,cadete,juvenil,andalucia,m arbella,españa,jugadores,torneos,ligas,equipos,coa ch,entrenadores,campus,peloteros,rfebs,jugador.">
<link rel="stylesheet" href="mm_spa.css" type="text/css" />
<style type="text/css">
body {
background-image: url();
margin-left: 0%;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
background-color: #FFCC33;
background-repeat: no-repeat;
}
a:link {
color: #FFCC33;
text-decoration: none;
}
a:visited {
color: #FFCC33;
text-decoration: none;
}
a:hover {
color: #FF6600;
text-decoration: underline;
}
.Estilo2 {color: #FF9900}
.Estilo3 {color: #000000}
.Estilo6 {color: #CC9900}
a:active {
text-decoration: none;
}
.Estilo16 {font-size: 14px; color: #FF6600; }
.Estilo20 {font-size: 18px; color: #FF6600; }
.Estilo32 {color: #FFCC33}
.Estilo33 {
font-weight: bold;
color: #ffcc33;
}
.Estilo34 {
color: #FF6600;
font-weight: bold;
}
.Estilo35 {color: #FFcc33}
.Estilo37 {color: #FFCC33; font-weight: bold; }
.Estilo39 {
font-size: 14px
}
.Estilo40 {font-size: 10px}
.Estilo42 {
font-size: 12px;
font-weight: bold;
}
.Estilo46 {font-weight: bold}
.Estilo60 {color: #000000; font-size: 14px; }
.Estilo64 {font-size: 12px}
.Estilo65 {
color: #FFCC00;
font-size: 12px;
font-weight: bold;
}
#apDiv1 {
position:absolute;
width:82px;
height:24px;
z-index:1;
left: 930px;
top: 10px;
}
#apDiv2 {
position:absolute;
width:93px;
height:85px;
z-index:2;
left: 879px;
top: 1764px;
}
.Estilo70 {color: #FFCC00}
.Estilo74 {
color: #FFCC00;
font-weight: bold;
}
.Estilo79 {
color: #FF6600;
font-weight: bold;
font-size: 14px;
}
.Estilo80 {color: #000000; font-weight: bold; }
.Estilo82 {color: #F7C631}
.Estilo84 {color: #FCCA32; font-weight: bold; }
#apDiv3 {
position:absolute;
width:200px;
height:141px;
z-index:2;
left: 11px;
top: 21px;
}
#apDiv4 {
position:absolute;
width:103px;
height:115px;
z-index:2;
left: 908px;
top: -2px;
}
.Estilo89 {color: #F7C509}
.Estilo92 {
font-size: 12px;
color: #FF0000;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.Estilo95 {color: #F7C631; font-weight: bold; }
.Estilo96 {color: #FCCA32; font-weight: bold; font-size: 12px; }
.Estilo100 {font-size: 14px; font-weight: bold; color: #000000;}
.Estilo102 {
font-size: 10px;
color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.Estilo105 {
color: #CC3300;
font-size: 11px;
}
.Estilo106 {font-size: 11px}
.Estilo110 {color: #FF0000}
.Estilo111 {font-size: 12px; color: #FFFFFF; }
.Estilo112 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Estilo113 {font-family: Geneva, Arial, Helvetica, sans-serif}
.Estilo116 {color: #FFCC33; font-family: Geneva, Arial, Helvetica, sans-serif; }
.Estilo117 {font-size: 11px; color: #FFFFCC; font-family: Geneva, Arial, Helvetica, sans-serif; }
.Estilo118 {font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; }
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 605px;
top: 31px;
}
.Estilo119 {color: #EE0000}
-->
</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
p.MsoNormal {
margin-top:0cm;
margin-right:0cm;
margin-bottom:10.0pt;
margin-left:0cm;
line-height:115%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}
-->
</style>
</head>
<script type="text/javascript" src="js/prototype.js"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Gracias por buestro tiempo
para responder por favor mandar al correo
[email protected]
