Una tabla HTML y Javascript algunos solían ser requerido para crear una galería de fotos de miniaturas y las imágenes más grandes que apareció cuando la miniatura se ha hecho clic en. Ahora, se puede lograr esto con CSS. No requiere Javascript y puede haberlo deshabilitado cambiando el CSS sin tener que reconstruir una tabla HTML complejo.
Instrucciones
el HTML
1 Hacer un contenedor DIV en su archivo HTML.
2 Hacer una lista desordenada de hasta diez elementos por página. Cada "& lt; li & gt;" la etiqueta (o elemento de la lista) contendrán una fotografía y la información que desea incluir en ello, como el título y el nombre del fotógrafo.
Por ejemplo:
<UL>
<LI> </ LI>
</ Ul>
3 Inserte el código fuente de la imagen fotográfica y la información en los elementos de la lista. Asegúrese de utilizar sólo una foto por elemento de la lista.
Por ejemplo: <LI> <img src = "/ images / photo1.jpg"> </ LI>
4 Ponga un salto de línea después de que la fuente de imagen y escriba un título para la fotografía.
Por ejemplo: <LI> <img src = "/ images / photo1.jpg"> <br> Título aquí </ LI>. Si desea incluir el nombre del fotógrafo, poner un segundo salto de línea y escriba el nombre del fotógrafo después de ella.
5 Por encima de la "& lt; HTML & gt;" etiqueta en la parte superior de su archivo, establecer el tipo de documento para XHTML 1.1. Esto asegura que la galería funciona como se espera en los navegadores más populares.
Por ejemplo: <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"!> 4.01 Transitional // EN" " http://www.w3.org/TR/html4/loose.dtd"&gt;
6 Agregar una etiqueta de anclaje en blanco alrededor de cada elemento de la lista. Esto permite utilizar el IE para: pseudo clase a aparecer las imágenes más grandes "estacionario". Dé a cada enlazar un nombre diferente pero relacionado clase (slidea, slideb, slidec, etc.) ya que esto le permitirá trabajar con imágenes específicas en el CSS. La "foto" antes "slidea" se utiliza para establecer el estilo general de las miniaturas.
<LI> <a class="photo slidea" href="#no"> <span> <img src = "/ images / photo1.jpg"> <br> Título aquí </ span> </a> </ LI >.
el CSS
7 Crear el estilo de la carrocería de la página web de la galería. Esto establece el estilo de todo el texto en la página. Escoger una fuente alrededor de 12 píxeles de tamaño y centrarla.
Por ejemplo: body {font-family: Los tiempos; font-size 12px; text-align: center; espaciado entre letras: .05em;}
8 Ajuste la etiqueta DIV contenedor a no más ancha que 770px y no más alto que 396px para permitir la galería para rinde muy bien en una resolución de 800x600. Si usted está construyendo para una resolución de pantalla más grande, recoger mayores dimensiones.
Por ejemplo: #container {position: relative; Anchura: 770px; altura: 396px; margen de 20 píxeles de auto 0 auto;}
9 Retire las balas de los elementos de la lista.
Por ejemplo: #container ul {list-style-type: none; margin: 0; padding: 0;}
10 Hacen las grandes imágenes invisibles para que puedan pre-carga.
Por ejemplo: #container a.photo Gen {position: absolute; anchura de 1 píxel; altura 1px; top: 5px; sobrecarga oculta;}
11 Crear el estilo de las miniaturas que incluirá cómo deben cuidar la imagen completa ha sido visto.
Ejemplo: #container a.photo, #container a.photo:visited~~V~~singular~~3rd {display: block; text-align: left; frontera: 1px solid: #CCC};
Si desea que las miniaturas para ser diferente después de la versión completa es vista, crean dos estilos y cambiar el color del borde.
12 Crear un estilo diferente para cada miniatura. El estilo será el lugar donde la imagen en miniatura se llama. Utilice los estilos que ha llamado en cada una de sus entradas de elementos de lista en la página HTML.
Por ejemplo: a.slidea #container {background: url (/images/thumb_01.jpg); altura: 90px Alto: 60px;}
13 Definir el final de cada fila. Para un diseño de 800x600, sucesivamente cada imagen será el final de su fila y una nueva fila se iniciará con la quinta imagen.
Por ejemplo: html #container a.slided {width: 90 px; w \ idth: 92 px;}
14 Definir las dimensiones de su diseño de la galería dando dimensiones específicas para la anchura y la altura de la etiqueta lista desordenada. Sume las anchuras de las miniaturas para una sola fila y las alturas de una sola columna de miniaturas. Utilizar esos totales dimensión en la hoja de estilo.
Por ejemplo: #container ul {width: 240px; altura: 180px}
15 Incluya la dirección que elija las imágenes que flotan (izquierda o derecha) y un pequeño margen:
Por ejemplo: #container ul {width: 240px; altura: 180px; flotar derecho; margen: 4 píxeles;}
dieciséis Ajuste el flotador para las imágenes individuales.
Por ejemplo: li #container {float: left;}
17 Hacer que la imagen grande aparece cuando el ratón se mueve sobre la miniatura.
Por ejemplo: #container a.photo:hover img {float: left; margin-right: 4PX}
Consejos y advertencias
- Usar miniaturas cuadrados para hacer más fácil el diseño.
- Si desea que la galería para el trabajo sin necesidad de desplazarse a una resolución de 800x600, hacer que sus imágenes llenas de no más de 372px por 240px.