Cómo crear una galería fotográfica con JavaScript

por:

Como crear una galeria fotografica con JavaScript

Uno de los proyectos más comunes hoy en día es crear una galería fotográfica o cualquier otro sistema que muestre de una manera impactante nuestras imágenes. Hoy os vamos a enseñar a hacerlo, utilizando una conocida librería de JavaScript.

Creando la galería fotográfica con JavaScript

Para desarrollar nuestra galería vamos a utilizar la biblioteca de JavaScript Grade.js la cual nos va a permitir:

  • Extraer los dos colores dominantes principales de la imagen
  • Generar un degradado basado en ambos colores
  • Enmarcar una fotografía con nuestro degradado

Todo lo anterior lo crea con muy pocas líneas de código y de manera totalmente automática. Para mostraros cómo funciona, lo mejor es basarnos en el siguiente ejemplo que he creado.

Demostración de galería fotográfica con JavaScript

Para realizar la demostración, se ha utilizado el siguiente código:

<!Doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/grade-js/1.0.10/grade.min.js"></script>

    <style>
      div {
        float: right;
        margin: 10px;
      }
      img {
        height: 400px;
        width: 200px;
      }
      .gradient-wrap {
        padding: 40px;
      }
    </style>
  </head>
  <body>
    <div class="gradient-wrap">
      <img src="angeles.jpg" />
    </div>
    <div class="gradient-wrap">
      <img src="avatar.jpg" />
    </div>
    <div class="gradient-wrap">
      <img src="elysium.jpeg" />
    </div>
    <div class="gradient-wrap">
      <img src="up.jpg" />
    </div>
    <div class="gradient-wrap">
      <img src="sincity.jpg" />
    </div>
    <div class="gradient-wrap">
      <img src="indiana.jpg" />
    </div>
        <script type="text/javascript">      
            Grade(document.querySelectorAll('.gradient-wrap'));      
      </script>
  </body>
</html>

En el se hace lo siguiente:

  • Se enlaza la librería Grade.js
  • Se define un pequeño estilo, encargado de separar las imágenes y crear una zona de marco
  • Se añade cada foto dentro de un div, que se va a encargar de mostrar un marco
  • Se pide que se ejecute la función Grade, añadiendo el degradado como fondo del selector escogido

El resultado obtenido es el siguiente:

Nuestra galería avanzada creada con JavaScript

Como podéis apreciar, cada imagen tiene un pequeño marco cuyo color es un degradado. Este degradado está construido sobre la base de los dos colores más dominantes de la imagen.

 

Espero que este artículo os haya gustado y si tenéis alguna duda o sugerencia, nos dejéis un comentario.

 

Un saludo

The following two tabs change content below.

Jorge Durán

Entusiasta de la tecnología desde los 10 años, desarrollador y creador de varios proyectos de software y autodidacta por naturaleza. Ingeniero Informático por la USAL