Refer to the current image img src

Navigation
0

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 that the zoom is done for each image?

I only accept the zoom of the first image, the other zoom also refer to the first image (A) and not the equivalents.

    
asked by omaza1990 20.11.2017 в 19:31
source

1 answer

1

I modified the initial code to use jQuery since it was in the current example and it's 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 fix it, in the function we only delete that element when the image is changed (and we remove a parent class that is also created from) and it is rebuilt all 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>
    
answered by 20.11.2017 / 23:52
source
read from the first page of an excel Problems with carosel in bootstrap 4