Cuando empecé a crear esta nueva web decidí que las imágenes de la galería ocuparan una parte amplia del espacio disponible del navegador. También tenía la idea de que siempre aparecieran centradas y con la misma distancia entre ellas, y que si decidía cambiar el tamaño de las imágenes no tuviera que rehacer el css.
Por otro lado quería que la cabecera, el menú de navegación y el pie se alinearan correctamente con las imágenes que quedaran en los extremos. Más o menos algo como lo que puede verse en esta imagen:
Supongo que hay formas sencillas de hacerlo, pero yo no lo conseguía. Así que para ello me creé un pequeño script que necesita de jQuery para funcionar (llamarlo plugin para jQuery quizá sea un poco excesivo).
Para que funcione simplemente tenemos que crear un div llamado gallery, que a su vez contenga para cada miniatura un div con la clase thumb, que puede contener la imagen, un pie de foto, o lo que nosotros queramos. El css asociado a cada thumb no forma parte del código, pero aspectos como el margin o el padding que se asignen en el css serán tenidos en cuenta automáticamente a la hora de calcular la anchura.
Una vez que tenemos la galería, asociamos la clase dynamicWidth a todo el contenido que queremos que tenga ese ancho variable, como lo puede ser la propia galería, la cabecera, el pie, o cualquier otro elemento.
Por último añadiremos a body, que también puede tener la clase dynamicWidth, la instrucción onLoad="setLayout();"
Por ejemplo, si tenemos los archivos Javascript necesarios en una carpeta llamada js, la parte HTML podría quedar así:
<html>
<head>
...
<!--JS-->
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/dynamicLayoutGallery.js"></script>
...
</head>
<body class="dynamicWidth" onLoad="setLayout();">
...
<div id="gallery">
<div class="thumb">
...
</div>
...
<div class="thumb">
...
</div>
</div>
...
</body>
</html>En el archivo Javascript podemos modificar fácilmente la separación que queremos que haya entre cada thumb, así como el número mínimo de imágenes que queremos que se vean en cada fila, incluso aunque el navegador sea de menor resolución. Esto puede ser útil por ejemplo en el caso de navegadores móviles, ya que mostrarán el número mínimo de imágenes que hayamos asignado, y así tenemos un mayor control sobre lo que se mostrará finalmente.
//horizontal separation between thumbnails (change it if you want)
var separation = "30px";
//minimum number of thumbnails in each row (change it if you want)
var minimNumThumbs = 3;Este script está publicado bajo la licencia Creative Commons CC BY, así que podéis utilizarlo tanto para proyectos personales como comerciales. A continuación podéis encontrar todos los archivos necesarios para su uso.
Demo: Galería (www.ilovemedia.es)
Plugin: Dynamic Layout Gallery (archivo javascript)
jQuery: Página de descarga de jQuery
Muchas Gracias! he pasado tratando de hacer esto en mi página sin éxito hasta ahora! pero esto lo soluciona! Kudos!