Substitute one image for another - Events - Javascript - HTML

Question

Substitute one image for another - Events - Javascript - HTML

Navigation

#1 by (5 votes)
#2 by (1 votes)

2

I have a set of images stored in an array and I show them through the array with a "foreach".

PHP Code of how I extract the images and show them:

$imagenes = $cabana->getImagenes();
//Recorremos el foreach del array "$imagenes".
$first = true;
foreach($imagenes as $imagen){
    if($first){
        echo "<img id='grande' src='imagenes/".$imagen."' width='260' height='260'/> &nbsp;&nbsp;&nbsp;&nbsp;";
        $first = false;
    }else{
        echo "<img class='peque' src='imagenes/".$imagen."' width='140' height='140'/ onclick='cambiarImagen(this)'> &nbsp;&nbsp;&nbsp;&nbsp;";
    }
}

As we can see, there is a superior image in terms of the size of the rest.

The problem is as follows : How do I do it (from the client side, javascript for example) so that when I click on an image of the smaller ones, I replace it with the larger main image? When the images are in an array, how do I know which image to click on? Because I only have one onClick event for all of them.

The idea would be something similar to this illustration:

javascript html imagen eventos

asked by omaza1990 17.11.2017 в 12:40

source

2 answers

1

First you should change your PHP , so that it stays more or less like this

$imagenes = $cabana->getImagenes();
//Recorremos el foreach del array "$imagenes".
$first = true;
foreach($imagenes as $imagen){
    if($first){
        echo "<img id='imggrande' src='imagenes/".$imagen."' width='260' height='260'/> &nbsp;&nbsp;&nbsp;&nbsp;";
        $first = false;
    }else{
        echo "<img src='imagenes/".$imagen."' width='140' height='140'/> &nbsp;&nbsp;&nbsp;&nbsp;";
    }
}

Please note that I have only added one ID field to the large image, and then I can refer to that image by jquery .

By JavaScript , more concrete with jquery , the following would be done

$("document.body").on("click", "img", function(){
     var pulsada = $(this).attr("src");
     $("#imggrande").attr("src", pulsada);
})

The only thing that this jquery does, is to read the image on which it has been punctured, loading it into the clicked variable and then modify the scr of the large one with the method attr of jquery

answered by 17.11.2017 в 12:55

Remove virus in wordpress with SED in a vps with linux I do not understand how Or works in python I refer to the following code

score 5 · Accepted Answer

You could assign to each small image a function (using the onclick attribute) to which you will pass the reserved word this . The reserved word this allows you to refer to the element with which you are interacting.

This way, once you get the path of the image that you just clicked on, you can assign it to the large image.

Example:

var imagenGrande = document.getElementById("grande");

function cambiarImagen(imagen){
   imagenGrande.src = imagen.src;
}

.peque{
   width: 100px;
}

#grande{
   width: 300px;
}

<img class="peque" src="https://i2.wp.com/medioambienteynaturaleza.com/wp-content/uploads/2015/06/Fondos-de-pantalla-de-paisajes-naturales25.jpg" onclick="cambiarImagen(this)">
<img class="peque" src="http://losviajesdedomi.com/wp-content/uploads/2014/02/Cano-Cristales-Los-Ochos-1-600x399.jpg" onclick="cambiarImagen(this)">
<img class="peque" src="http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg" onclick="cambiarImagen(this)">
<img id="grande" src="http://www.paisajesbonitos.org/wp-content/uploads/2015/11/paisajes-bonitos-de-oto%C3%B1o-lago.jpg">

Applied to your case you would simply have to add the function in your Javascript and add the onclick attribute to each of the images when you print them with the echo statement.