Presentación de diapositivas de JavaScript con CSS

• Abril 30, 2024

En un artículo anterior creamos una presentación de diapositivas JavaScript muy simple. Esta presentación de diapositivas es completamente funcional e incluso muestra algo apropiado para las personas que no tienen JavaScript, pero no tiene todas las características que me gustaría tener para mi sitio web. En particular, me gustaría que la miniatura de la imagen que estoy mostrando actualmente se vea diferente de las otras miniaturas. Dado que los estilos son una buena manera de lograr esto, comenzaré convirtiendo todos los atributos en mi HTML existente a CSS.

Primero convertí mi estilo existente para usar CSS. Si no está familiarizado con CSS, la forma más fácil de comenzar a experimentar con él es ponerlo entre estilo etiquetas en el encabezado de su documento HTML. La etiqueta inicial necesita un atributo de tipo para decirle al navegador qué tipo de información de estilo está utilizando, por lo que debería verse así:



La conversión inicial a CSS fue fácil ya que solo la imagen grande tenía información de estilo y ya tenía un carné de identidad atributo que se estaba utilizando para fines de JavaScript.

#largeImage {
borde: 2px negro sólido;
ancho: 544 px;
altura: 408 px;
}

No había incluido previamente información de tamaño para las miniaturas, pero agregué una clase llamada pulgares y establezca etiquetas de imagen en esa clase para establecer el tamaño en 40 px por 40 px. Esto significa que incluso si accidentalmente cargo imágenes que son demasiado grandes o pequeñas para las miniaturas, se verán obligadas a mostrarse en miniatura.

img.thumbs {
borde: ninguno;
ancho: 40px;
altura: 40px;
}

También agregué un diapositivas clase para mantener toda la presentación de diapositivas. Esto me permitirá hacer cosas como agregar un borde o cambiar el color de fondo para toda la presentación si lo deseo. En este punto, solo lo estoy usando para establecer la altura máxima a la altura de la imagen grande, porque cuando agrego más miniaturas, quiero que permanezcan en el lado de la imagen grande en lugar de moverse por encima de ella. Desafortunadamente, Internet Explorer no admite el atributo max-height, por lo que aún tendré que trabajar en este problema más adelante.

.diapositivas{
altura: 408 px;
altura máxima: 408 px;
}

Finalmente creé un estilo para la miniatura seleccionada. Decidí que quería que mi miniatura seleccionada fuera semitransparente y tuviera un borde rojo estrecho. Como solo se seleccionará una imagen a la vez, decidí usar una identificación llamada "actual" para este propósito. La ventaja de usar CSS es que puedo cambiar cómo se verá en cualquier momento sin cambiar el código. El estilo se ve así:

img # current {
borde: 1px rojo sólido;
filtro: alfa (opacidad = 50);
-moz-opacidad: 0.5;
opacidad: 0.5;
}

Aquí vemos un código para manejar las diferencias del navegador nuevamente, el estándar requiere el uso de un elemento de opacidad, pero los navegadores basados ​​en IE y Mozilla aún no lo admiten.

Finalmente, cambié el HTML de las miniaturas para usar los estilos y llamar a mi función. El HTML para mi presentación de diapositivas ahora se ve así:









No hemos cambiado nuestro JavaScript, por lo que la presentación de diapositivas aún funciona, pero ahora tenemos más estilo y nuestra presentación está separada de nuestro HTML y JavaScript. Sin embargo, tenemos un problema, mientras que la miniatura seleccionada inicialmente es semitransparente con un borde rojo, permanece así cuando cambiamos las imágenes. Para solucionar esto, debemos volver a nuestro viejo amigo JavaScript.

Puede ver un ejemplo funcional del código hasta ahora aquí.

Instrucciones De Vídeo: Tutorial Tarjeta de Presentación / Portafolio con HTML, CSS y JS (Jquery) (Abril 2024).