Apuntes DAW Apuntes FP Desarrollo Web en Entorno Cliente

Buscador de imágenes en tu galería con JavaScript

entreunosycerosPublicado el: Última actualización: 01 Vistas

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo que puede resultar útil para crear un buscador de imágenes que se puede utilizar en nuestra propia galería de imágenes. Esto es algo que si tienes varios cientos de imágenes, puede ser muy de utilidad para encontrar imágenes en nuestro propio servidor.

Tengo que decir que para este ejemplo, solo el buscador se creará con JavaScript. La galería la he creado solo con HTML, pero sería sencillo crear una galería que añada de forma automática las imágenes de una carpeta a la galería. Además utilizaremos un poco de CSS para crear el efecto de ventana modal para ver las imágenes sobre las que hagamos clic.

Buscador de imágenes en tu galería

Para crear este sencillo ejemplo, solo necesitaremos tres archivos. Uno HTML, otro CSS y otro JS. Además crearemos una carpeta llamada images, que será en donde ubicaremos las imágenes de nuestra galería.

Archivo index.html

Dentro del archivo index.html, crearemos la estructura de nuestra galería de imágenes. Aquí será en donde añadiremos un div para cada imagen, con la categoría «image-box» y la etiqueta data-name, que será donde daremos el nombre a cada imagen, por el cual podremos buscar la imagen.

En este archivo, dentro de cada div, crearemos una etiqueta figure para marcar una imagen, y un elemento de figcaption para definir un título para la foto. Las imágenes las tendremos guardadas en la carpeta images. Tener que introducir las imagenes a mano, no es muy práctico, pero crear una galería de imágenes que las añada de forma automática, no es muy complicado.

Y bueno, además todo todo esto, solo necesitaremos añadir el CSS que nos servirá para dar aspecto a este proyecto, e importaremos el CSS boxicons para añadir el icono de la lupa al buscador. Además también añadiremos el archivo JavaScript que vamos a crear.

Y dicho todo esto, solo queda pegar el siguiente código dentro del archivo index.html:

<!DOCTYPE html>

<html lang="es">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta data-name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Galería de imágenes con opción de búsqueda</title>
    <!-- Los CSS necesarios -->
    <link rel="stylesheet" href="style.css" />
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet' />
</head>

<body>
    <div class="container">
        <div class="titulo">Galería de imágenes</div>

        <div class="search-box">
            <i class="bx bx-search"></i>
            <input type="text" placeholder="Buscar imagen">
        </div>

        <div id="msg"></div>
        <!--lugar del mensaje-->

        <div class="images">
            <div class="image-box" data-name="life">
                <figure>
                    <img src="images/isthisthelife.jpg" alt="is this the life" class="modalImg" />
                    <figcaption>life</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="entreunosyceros">
                <figure>
                    <img src="images/entreunosyceros.jpeg" alt="entreunosyceros" class="modalImg" />
                    <figcaption>entreunosyceros</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="passenger">
                <figure>
                    <img src="images/passenger.jpg" alt="Passenger" class="modalImg" />
                    <figcaption>passenger</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="vacaciones">
                <figure>
                    <img src="images/vacaciones.jpg" alt="Vacaciones #1" class="modalImg" />
                    <figcaption>vacaciones</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="rana">
                <figure>
                    <img src="images/ranafluorescente.jpg" alt="rana" class="modalImg" />
                    <figcaption>rana</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="joker">
                <figure>
                    <img src="images/joker.jpg" alt="Joker" class="modalImg" />
                    <figcaption>joker</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="universe">
                <figure>
                    <img src="images/universe.jpg" alt="Universe" class="modalImg" />
                    <figcaption>the universe</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="entreunosyceros">
                <figure>
                    <img src="images/Error-404-entreunosyceros.jpg" alt="error 404" class="modalImg" />
                    <figcaption>error 404</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="truth">
                <figure>
                    <img src="images/truth-is.jpg" alt="truth is" class="modalImg" />
                    <figcaption>truth</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="guitarra">
                <figure>
                    <img src="images/guitarra.jpg" alt="guitarra" class="modalImg" />
                    <figcaption>guitarra</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="vacaciones">
                <figure>
                    <img src="images/vacaciones2.jpg" alt="vacaciones 2" class="modalImg" />
                    <figcaption>vacaciones 2</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="binary code">
                <figure>
                    <img src="images/binary-code.jpg" alt="binary code" class="modalImg" />
                    <figcaption>binary code</figcaption>
                </figure>
            </div>
            <div class="image-box" data-name="Xspace">
                <figure>
                    <img src="images/space.jpg" alt="Xspace" class="modalImg" />
                    <figcaption>Xspace</figcaption>
                </figure>
            </div>
        </div>
    </div>

    <script src="script.js"></script> <!-- Script JS-->
</body>

</html>

Archivo style.css

Llegados a este punto, vamos a crear el archivo css llamado style.css. Aquí crearemos las reglas necesarias para nuestros buscador de imágenes. Dentro de este archivo, tan solo tendremos que pegar el siguiente código:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Comic Sans Ms', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Título */
.titulo {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    font: normal 48px/normal "Warnes", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-decoration: normal;
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    white-space: pre;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0062, 0 0 100px #5f002c;
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    width: 100%;
}

.titulo:hover {
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #3f3f3f, 0 0 70px #181818, 0 0 80px #1d1d1d, 0 0 100px #000000;
}

.container {
    position: relative;
    min-height: 100vh;
    max-width: 150vh;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Formulario de búsqueda */

.container .search-box {
    position: relative;
    height: 42px;
    max-width: 400px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.search-box input {
    position: absolute;
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background-color: #323334;
    padding: 0 15px 0 45px;
    color: #fff;
    border-radius: 6px;
    font-weight: bold;
}

.search-box i {
    position: absolute;
    z-index: 2;
    color: #999;
    top: 50%;
    left: 15px;
    font-size: 20px;
    transform: translateY(-50%);
}

/* Ventana modal */

.container .images .image-box {
    position: relative;
    height: 300px;
    width: 210px;
    border-radius: 6px;
    overflow: hidden;
}

.images {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.images .image-box {
    margin: 8px;
}

.images .image-box img {
    height: 100%;
    width: 100%;
    border-radius: 6px;
    transition: transform 0.2s linear;
}

.image-box:hover img {
    transform: scale(1.05);
}

figure {
    display: inline-block;
    height: 250px;

}

figcaption {
    font-style: oblique;
    text-align: center;
}

.imagen img {
    max-width: 100%;
    cursor: pointer;
}

.modalImg {
    cursor: pointer;
    border-radius: 0.4rem;
    max-width: 160px;
}

.imodalImg:hover {
    opacity: 0.8;
}

.modal {
    display: none;
    /* ocultar por defecto */
    position: fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border: solid 1px;
    background: rgba(0, 0, 0, 0.9);
    padding-top: 5%;
    overflow: hidden;
}

#modalImg {
    display: block;
    position: fixed;
    width: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* center to window */
}

/* botón cerrar ventana modal

#modalClose {
    position: absolute;
    cursor: pointer;
    top: 30px;
    right: 50px;
    color: #fff;
    transition: all;
    font-weight: bold;
    font-size: 5rem;
}
*/

#modalText {
    margin: auto;
    display: block;
    text-align: center;
    color: #ccc;
}

/* animaciones */

#modalText {
    animation-name: zoom;
    animation-duration: 0.5s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/*Mensaje*/

#msg {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 25px;
}

Archivo script.js

El último archivo que vamos a crear se llamará script.js. Aquí será donde se realice la búsqueda comparando el valor introducido por el usuario en el campo de búsqueda con el valor del nombre de la imagen (image.dataset.name). Además será donde se va a crear la ventana modal en la que podremos ver la imagen seleccionada.

Dentro de este archivo, solo tendremos que pegar el siguiente código:

const search = document.querySelector(".search-box input"),
    images = document.querySelectorAll(".image-box");

search.addEventListener("keyup", (e) => {
    if (e.key == "Enter") {
        let searcValue = search.value,
            value = searcValue.toLowerCase();

        images.forEach((image) => {
            if (value === image.dataset.name) {
                //valor coincidente con el atributo de obtención de imágenes

                document.getElementById("msg").innerHTML = "Imagenes encontradas:";

                return (image.style.display = "block");
            }

            return (image.style.display = "none");
        });
    }
});

search.addEventListener("keyup", () => {
    if (search.value != "") return;

    images.forEach((image) => {
        image.style.display = "block";

        document.getElementById("msg").innerHTML = "";
    });
});

window.addEventListener("load", () => {
    // crea el elemento padre <div id="modal">
    let modal = document.createElement("div");
    modal.setAttribute("id", "modal");
    modal.setAttribute("class", "modal");

    // crea el elemento hijo <div id="modalClose">
    let modalClose = document.createElement("div");
    modalClose.setAttribute("id", "modalClose");
    modalClose.innerHTML = "&times;";

    // crea el elemento secundario <img>
    let modalImg = document.createElement("img");
    modalImg.setAttribute("id", "modalImg");

    // crea el elemento hijo <div id="modalText"
    let modalText = document.createElement("div");
    modalText.setAttribute("id", "modalText");

    // elementos de nodo abierto
    document.body.append(modal);
    modal.appendChild(modalClose);
    modal.appendChild(modalImg);
    modal.appendChild(modalText);

    // encontrar todos los elementos con la clase modalImg
    let imgList = document.querySelectorAll(".modalImg"),
        i;
    for (const img of imgList) {
        // agregar evento haga clic para mostrar modal y agregar atributo src
        img.addEventListener("click", () => {
            modal.style.display = "block";
            modalImg.src = img.src;
            modalText.innerHTML = img.alt;
        });
    }

    // evento, ocultar modal si el usuario hace clic en el modal
    modal.addEventListener("click", function () {
        modal.style.display = "none";
    });
});

Y con esto ya tendremos creado nuestro buscador de imágenes. Guardados todos los archivos, solo queda ejecutar el archivo index.html para iniciar el ejemplo. Si quieres ver funcionando este buscador de imágenes, antes de probarlo en tu equipo, puedes probar el ejemplo en la sección de ejemplos de esta página web.

Post relacionados

Gasoliprecio, busca las estaciones de servicio con el mejor precio

Acortador de URLs. Crea URL’s cortas desde el escritorio

Organizador de listas M3U. Gestión y reproducción con facilidad

Añadir comentario