Cómo utilizar una miniatura para vincular a una galería de imágenes Uso de JavaScript

JavaScript es un lenguaje popular script del lado del cliente; es ligero, rápido, y se ejecuta en el navegador, lo que permite la interacción en tiempo real entre el visitante del sitio web y la página web. Una de las aplicaciones habituales de este lenguaje es crear galerías de imágenes que respondan a las acciones del usuario; por ejemplo, mediante la visualización de una imagen de tamaño completo cuando un usuario hace clic en su ratón sobre una imagen en miniatura, sin cargar toda una nueva página en el navegador.

Instrucciones

1 Hacer una lista desordenada de imágenes en miniatura. Cada imagen en miniatura está vinculado a la imagen de tamaño completo. El código podría ser algo como esto:

<P> Haga clic en la miniatura para ver la imagen a tamaño completo. </ P>
<Ul ID = \ "imageGallery \">

<li><a href=\"cat-pic-large.jpg\"><img src=\"cat-pic-thumb.jpg\" alt=\"cat\" title=\"This is my cat, Tabby\" /></a></li>
<li><a href=\"dog-pic-large.jpg\"><img src=\"dog-pic-thumb.jpg\" alt=\"dog\" title=\"This is my dog, Toby\" /></a></li>
<li><a href=\"hampster-pic-large.jpg\"><img src=\"hampster-pic-thumb.jpg\" alt=\"hampster\" title=\"This is my hampster, Tibby\" /></a></li>

</ Ul>

2 Implementar una función de control de eventos. Hay muchas de estas secuencias de comandos disponibles en línea. Los siguientes ejemplos implementar la sintaxis de fácil uso de la función addEvent por Dean Edwards.

3 Inicializar su galería de script cuando se carga la página. Añadir un detector de eventos para el evento de carga de la ventana, y lo utilizan para activar su función de inicialización.

addEvent (ventana, "carga", setupGallery);

4

Añadir un detector de eventos clic del ratón a cada imagen en la lista de la galería. Cuando el usuario hace clic en una imagen, se llamará a la función showFullSize. Para hacer más ágil la función, cargar previamente la imagen a tamaño completo en el navegador.

setupGallery función () {
Galería var = document.getElementById ( 'imageGallery')
IR
imágenes var = gallery.getElementsByTagName ( 'img')
IR
for (var i = 0; i <images.length; i ++) {
addEvent (imágenes [i], "clic", showFullSize)
IR
preloadFullSize (imágenes [i])
IR
}
}

5 Crear una función para visualizar la imagen a tamaño completo. Recuperar información de archivo de origen de la gran imagen de la etiqueta de enlace que envuelve el elemento de imagen. Crear un nuevo elemento "div" como un contenedor de visualización. Crear un nuevo elemento de imagen con la información de la fuente apropiada, y añadir la imagen al contenedor. Desde aquí el ejemplo cubrirá toda la página, crear un enlace para eliminar la imagen de tamaño completo y mostrar la galería de nuevo. Por último, añadir el contenedor al cuerpo del documento HTML para hacer que todo visible.

función showFullSize (e) {

cancelClick (e)
IR

fuente var = this.parentNode.getAttribute ( 'href')
IR
pantalla var = document.createElement ( 'div')
IR
display.setAttribute ( 'id', 'imageDisplayFrame')

var pic = document.createElement ( 'img')
IR
pic.setAttribute ( «origen», fuente)
IR
display.appendChild (PIC)
IR

la eliminación document.createElement = ( 'p')
IR
removal.innerHTML = \ "Cerrar la ventana \"
removal.onclick = function () {removeFullSize ();}
display.appendChild (eliminación)
IR

document.getElementsByTagName ( "cuerpo") [0] .appendChild (pantalla)
IR
}

6 Utilizar el mismo método para obtener la ruta del archivo de la imagen de tamaño completo de la función de imagen en preloader. Esta función crea un nuevo objeto de imagen y le asigna un valor de origen, haciendo que el navegador para cargar la imagen antes de que se muestre.

preloadFullSize función (imagen) {
fuente var = image.parentNode.getAttribute ( 'href')
IR
var newPic = new Image ()
IR
newPic.src = fuente
IR
}

7 Tenga en cuenta que la función showFullSize llama a otra función llamada cancelClick. Esta función evitará que la acción predeterminada de clic del ratón del usuario, es decir, navegando a la imagen de tamaño completo.

función cancelClick (e) {
tratar{
window.event.cancelBubble = true
IR
window.event.returnValue = false
IR
} Catch (error) {
e.stopPropagation ()
IR
e.preventDefault ()
IR
}
falso retorno
IR
}

8 Crear una función removeFullSize, que se llamará cuando el usuario elige para cerrar la imagen a tamaño completo y volver a la galería.

removeFullSize función () {
pantalla var = document.getElementById ( 'imageDisplayFrame')
IR
display.parentNode.removeChild (pantalla)
IR
}

9 El estilo de los elementos de la lista con CSS (Cascading Style Sheets) para hacer una visualización atractiva. Este ejemplo tiene un fondo negro sólido; es posible que desee utilizar una imagen PNG semitransparente en su aplicación.

<Style type = \ "text / css \">

galería de imágenes{

margin: 0;
padding: 0
IR
}

li {imageGallery

margin: 0;
padding: 0;
Anchura: 200px;
altura: 200px;
frontera: 1px solid # 8E8E8E;
flotador izquierdo;
text-align: Centro
IR
}

imageGallery li a {img

border: 0;
margen: 20px auto
IR
}

imageDisplayFrame {

background-color: # 000;
position: absolute;
top: 0;
izquierda: 0;
width: 100%;
altura: 100%;
text-align: center;
margin: 0;
padding: 0
IR
}

imageDisplayFrame img {

margen: 10px 150px auto automóvil
IR
}

imageDisplayFrame p {

Color: #FFF
IR
}
</ Style>

10 Pon a prueba tu galería de imágenes en miniatura basado en JavaScript en su navegador y modificar el estilo CSS al gusto.