Home / Questions / 118190
Accepted
omaza1990
Asked: 2020-11-18 03:40:40 +0800 CST 2020-11-18 03:40:40 +0800 CST

Replace one image with another - Events - Javascript - HTML

  • 772

I have a set of images stored in an array and I display them by looping 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 size of the rest.

The problem is the following : How do I (from the client side, javascript for example) click on one of the smaller images to replace it with the larger main image? Since 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 like this illustration:

enter image description here

javascript

3 Answers

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

    This way, once you get the path of the image you just clicked on, you can assign it to the big 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 attribute onclickto each of the images when you print them using the statement echo.

    • 6

  2. First you should change your PHP, so that it is 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;";
    }
}

    Notice that I have only added an ID field, to the large image, so that I can then reference jquerythat image by.

    For JavaScript, more specifically 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 this does jqueryis read the clicked image, loading it into the clicked variable and then modifying scrthe big one with the attrmethodjquery

    • 1
  3. Best Answer
    <script>  
     document.getElementById("file").addEventListener('change', cambiarImagen);
           function cambiarImagen(event){
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = (event) => {
                document.getElementById("picture").setAttribute('src', event.target.result);
            };
            reader.readAsDataURL(file);
           }
        </script>
    • 0