Tengo un problemita con la galería Lightbox. Creo que he puesto correctamente el tema en AJAX, pero si no es así, pido disculpas por adelantado. He buscado solución a mi duda, pero no encuentro. De hecho, acabo de mandarle también un mail ¡en inglés! al correo de contacto que pone [url=http://www.lokeshdhakar.com/projects/lightbox2/]aquí[/url] que es donde me bajé los archivos, y a ver si me contesta. Bueno, más bien a ver si la persona que lo reciba, se pispa de lo que le pregunto en el mail porque soy nula con el inglés...
El caso, lo que quiero es que al abrir la imagen, me la abra redimensionada a la resolución de pantalla en donde se abra. Pensaba que lo hacía automáticamente, pero veo que no. Estoy montando una web, lo que pasa que no la tengo todavía, por eso no puedo enlazarla aun.
Pero tengo estos códigos:
Este es el script que te pide que añadas en el <head>
Código:
Así es como enlazo las fotos en el <body><script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>
Código:
(Yo creo la miniatura que yo quiero, porque así me aseguro que sean todos los tamaños iguales independientemente del tamaño de la original)<a href="fotogrande.jpg" rel="lightbox[roadtrip]" title="Título"><img src="fotopeque.jpg" width="50" height="50" border="0" /></a>
Y luego esta es la hoja de estilo CSS que es uno de los archivos que te bajas:
Código:
¿Alguien podría decirme qué y dónde añadir lo que haga falta para que al pinchar, y se abra el lightbox con la foto grande, ésta se reidmensione automáticamente a la pantalla?#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(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink: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; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Gracias de antemano :)
