-69 votes

Reference the current image img src

I have three images A, B and C that can take the value of the large image by clicking on the large image (loaded by default with image A).

My code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Index.html</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
        <link rel="stylesheet" type="text/css" href="cambiarimagen.css"/>
        <link href="https://www.jose-aguilar.com/scripts/jquery/zoomy/zoomy.css" rel="stylesheet"/>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="https://www.jose-aguilar.com/scripts/jquery/zoomy/zoomy.min.js"></script>

        <script type="text/javascript">
            function cambiarImagen(imagen) {
                /*Se obtiene el valor del id "grande". */
                var imagenGrande = document.getElementById("grande");
                imagenGrande.src = imagen.src;

                /*Se obtiene el elemento mediante la clase. */
                var aElement = document.getElementsByClassName("zoom")[0];
                /*El a href del valor actual es... */
                var aHref = aElement.getAttribute("href");
                /*El src de la imagen con id grande es... */
                aElement = aHref.src;
            }

            $(function() {
                $('.zoom').zoomy();
            });
        </script>
    </head>

    <body>
        <center>
            <br/><br/>
            <img class="peque" src="http://stadioalicante.com/wp-content/uploads/2016/06/seta-icono-new-super-mario-bros-wii-articulo-videojuegos-zehngames.png" onclick="cambiarImagen(this)"/>&nbsp;&nbsp;&nbsp;
            <img class="peque" src="https://www.muycomputer.com/wp-content/uploads/2012/10/whatsapp-630x405.jpg" onclick="cambiarImagen(this)"/>&nbsp;&nbsp;&nbsp;
            <img class="peque" src="https://ep01.epimg.net/verne/imagenes/2016/05/09/articulo/1462808367_678696_1462867491_rrss_normal.jpg" onclick="cambiarImagen(this)"/>
            <br/><br/><br/><br/><br/>
            <a href="http://stadioalicante.com/wp-content/uploads/2016/06/seta-icono-new-super-mario-bros-wii-articulo-videojuegos-zehngames.png" class="zoom"><img id="grande" src="http://stadioalicante.com/wp-content/uploads/2016/06/seta-icono-new-super-mario-bros-wii-articulo-videojuegos-zehngames.png"/></a>
        </center>
    </body>
</html>

How do I know the current value of the href and src of the image with id="large" and zoom on a per-image basis?

It only accepts the zoom of the first image, the remaining zooms also refer to the first image (A) and not to the equivalents.

1voto

adearmas Points 36

I modified the initial code to use jQuery since it was in the current example and it is easier this way.

In this case the zoomy is not updated with the image because internally in the first call it creates a new element (div with class name zoomy), this has in the css, the background the initial image of the element .

To solve it, in the function we only delete that element when the image is changed (and remove a parent class that is also created from ) and re-generate everything with .zoomy() that uses the new image.

<html>
    <head>
        <title>Index.html</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
        <link rel="stylesheet" type="text/css" href="cambiarimagen.css"/>
        <link href="https://www.jose-aguilar.com/scripts/jquery/zoomy/zoomy.css" rel="stylesheet"/>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="https://www.jose-aguilar.com/scripts/jquery/zoomy/zoomy.min.js"></script>

        <script type="text/javascript">
            function cambiarImagen(imagen) {
                $("#grande").prop("src", imagen.src);
                $(".zoom").prop("href",  $("#grande").prop("src"));

                $(".zoomy").remove();
                $(".zoom").removeClass("parent-zoom");
                $('.zoom').zoomy();
            }

            $(function() {
                $('.zoom').zoomy();
            });
        </script>
    </head>

    <body>
        <center>
            <br/><br/>
            <img class="peque" src="http://stadioalicante.com/wp-content/uploads/2016/06/seta-icono-new-super-mario-bros-wii-articulo-videojuegos-zehngames.png" onclick="cambiarImagen(this)"/>&nbsp;&nbsp;&nbsp;
            <img class="peque" src="https://www.muycomputer.com/wp-content/uploads/2012/10/whatsapp-630x405.jpg" onclick="cambiarImagen(this)"/>&nbsp;&nbsp;&nbsp;
            <img class="peque" src="https://ep01.epimg.net/verne/imagenes/2016/05/09/articulo/1462808367_678696_1462867491_rrss_normal.jpg" onclick="cambiarImagen(this)"/>
            <br/><br/><br/><br/><br/>
            <a href="http://stadioalicante.com/wp-content/uploads/2016/06/seta-icono-new-super-mario-bros-wii-articulo-videojuegos-zehngames.png" class="zoom"><img id="grande" src="http://stadioalicante.com/wp-content/uploads/2016/06/seta-icono-new-super-mario-bros-wii-articulo-videojuegos-zehngames.png"/></a>
        </center>
    </body>
</html>

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X