The Digital Mike

seccion de galeria final con texto

Galería de imágenes para tutoriales

The Digital Mike

|

|

, , ,

Te has topado alguna vez con la necesidad de presentar imágenes de cada paso que realizas en tus tutoriales? Muchas veces queremos mostrar multiples imágenes sobre un proceso especifico en nuestros tutoriales. Con este sencillo tutorial sobre como crear una galería de imágenes para tutoriales, podemos lograr esto.

Como lograrlo? Continua leyendo para que aprendas como hacer una galería de imágenes para tutoriales mas abajo, donde encontraras un ejemplo sencillo que puedes utilizar en tus paginas web.

Creando la galería de imágenes con HTML

Lo primero sera crear el HTML. Aquí abajo encontraran el código. 

<section>
        <div class="row">
            <div class="col6"><div class="bigimg"><img src="bg1.jpg" alt="Preview image" id="bigimg"></div></div>
            <div class="col6">
                <ul class="smallimg" style="display:flex;">
                    <li><img class="imgthumb" src="bg1.jpg" alt="image 1 small"></li>
                    <li><img class="imgthumb" src="bg2.jpg" alt="image 2 small"></li>
                    <li><img class="imgthumb" src="bg3.jpg" alt="image 3 small"></li>
                </ul>
                <div>
                    <ol>
                        <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima tenetur ex minus vitae amet quibusdam cupiditate sed eum nulla enim eveniet id, magnam praesentium excepturi? Temporibus ab consequatur doloribus ipsam?</p></li>
                        <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quam dolores dicta ducimus aspernatur pariatur doloribus ab possimus earum, exercitationem ipsum rerum quos saepe ex? Harum ipsum accusantium maxime minus.</p></li>
                        <li><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quam dolores dicta ducimus aspernatur pariatur doloribus ab possimus earum, exercitationem ipsum rerum quos saepe ex? Harum ipsum accusantium maxime minus.</p></li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

Este código de arriba presenta una imagen en grande, y tres pequeñas, así como un poco de texto aleatorio. Con esto creado, la idea es que, cuando pasemos el puntero por encima de las imágenes pequeñas, esta se muestre en la imagen grande. Esto permitirá que podamos agregar los diferentes pasos sobre como hacer algo especifico en nuestro tutorial.

Para realizar esta actividad, vamos a continuar con el estilo y luego pasaremos a la parte de JavaScript para crear los eventos.

Agrega el estilo CSS a la Galeria de imagenes

Este es nuestra sección de estilo. Aquí haremos que la imagen grande este a la izquierda y las pequeñas este en la derecha junto al texto. Ademas que en mobile se vera todo uno debajo del otro.

<style>
        .row{display: block;font-size: 20px;}
        .row .col6{width: 100%;}
        .bigimg{border: 1px solid #eee;}
        .bigimg img{width: 100%;}
        .smallimg{display: block;list-style: none;}
        .smallimg li{padding: 0;margin:5px 15px; }
        .smallimg li .imgthumb{transition: all .5s;border-radius: 10px;max-width: 150px;width: 100%;}
        .imgs{transform: scale(1.1);box-shadow: -2px 2px 8px #333;}
        @media only screen and (min-width:768px) {
            .row{display: flex;flex: 1;}
            .col6{width: 50%;margin: 0 auto;}
        }
    </style>

Lo siguiente serán los eventos a usar.

Incluye el código funcional para la galería

Este es el javasacript a usar, es algo simple y sencillo. Las explicación es la siguiente

  • Declaramos las variables; una para la imagen grande y otra para las imágenes pequeñas.
  • Creamos un loop forEach con el cual agregaremos un evento «mouseover«, para cuando el puntero se posa en la imagen, el que agregara a la imagen pequeña en la que nos posemos un estilo, y al mismo tiempo cambiara la imagen grande
  • Al final crearemos otro evento, este como «mouseout«, para cuando alejamos el puntero de la imagen, removiendo la clase que agregamos anteriormente.
<script>
        //TODO
        var bigimg = document.getElementById('bigimg'),
            imgthumb = document.querySelectorAll('.imgthumb');

        imgthumb.forEach((el) =>{
            el.addEventListener('mouseover', function(){
                this.classList.add('imgs');
                bigimg.setAttribute('src', this.src);
            });
            el.addEventListener('mouseout', function(){
                this.classList.remove('imgs');
            });
        });
    </script>

Y con esto obtenemos un resultado bien sencillo en el que cuando pasamos por encima de una de las imágenes, esta se muestra en la zona grande. Así de esta manera podemos incluir varias fotos sobre diferentes pasos a seguir en un pequeño espacio mientras describimos el proceso que realizamos.

[sc name=»galeriaimagen» ][/sc]

Espero que les guste este post y nos vemos en otra publicación. Saludos y feliz aprendizaje.