Plugin para convertir imagen al hacer click

G

gabrielqwerty

• 21 Oct 2020

• #1

Buenas forobetos y forobetas del lugar.
Me preguntaba si alguno de vosotros conoce algun plugin para hacer esto que voy a explicar, intentare hacerlo lo mejor posible "Un plugin que cuando el usuario haga click sobre una imagen, como por arte de magia se convierta en otra imagen diferente" Mi idea es algo como "Haz click en la imagen y descubre lo que hay debajo"
Gracias por adelantado !!

 

Y

YeltsinReyes

• 21 Oct 2020

• #2

gabrielqwerty dijo:

Buenas forobetos y forobetas del lugar.
Me preguntaba si alguno de vosotros conoce algun plugin para hacer esto que voy a explicar, intentare hacerlo lo mejor posible "Un plugin que cuando el usuario haga click sobre una imagen, como por arte de magia se convierta en otra imagen diferente" Mi idea es algo como "Haz click en la imagen y descubre lo que hay debajo"
Gracias por adelantado !!

Hacer clic para expandir...

Eso lo puedes hacer con JavaScript!

 

G

gabrielqwerty

• 21 Oct 2020

• #3

ya se que con java se puede.. pero no tengo ni la mas mínima idea sobre su uso y disfrute 🙁

 

F

Florchi

• 21 Oct 2020

• #4

gabrielqwerty dijo:

ya se que con java se puede.. pero no tengo ni la mas mínima idea sobre su uso y disfrute 🙁

Hacer clic para expandir...

Googleando lo encuentras, pon: script para cambiar imagen cuando hagas click

 

Y

YeltsinReyes

• 21 Oct 2020

• #5

gabrielqwerty dijo:

ya se que con java se puede.. pero no tengo ni la mas mínima idea sobre su uso y disfrute 🙁

Hacer clic para expandir...

Este código te puede servir!

A tu imagenes le agregas el link de la otro imagen en el atributo data-src y una clase
que se llame img-click, todas las imágenes con esa clase y el data-src aran lo que quieres!

Este codigo lo agregas en tu footer.php arriba de </body>

HTML:

<img src="original.jpg" data-src="no-original.jpg" class="img-click">

JavaScript:

<script>
var imgs = document.querySelectorAll('.img-click');
imgs.forEach(function(img, index){
 
    img.addEventListener('click', function(){
        if(this.hasAttribute('data-src') !== false){
            this.setAttribute('src', this.getAttribute('data-src'));
        }
    });
 
});
</script>

 

P

pablocd

• 21 Oct 2020

• #6

Hay plugins que muestran una miniaturs y luego la imagen ampliada y te dejan que sean diferentes. Busca alguna de tipo carrusel como slider carrousel.

 

G

gabrielqwerty

• 21 Oct 2020

• #7

Gracias chicos por la info!