How to change img and zoom img on click event?

[raysefo]

Hello guys,

I would like to know if there is a way to change the src and data-zoom-image when user clicks on a specific html tag on the page?

HTML:

Javascript: $(document).ready(function () { $("#zoom").elevateZoom({ zoomType: "inner", cursor: "crosshair", zoomWindowFadeIn: 500, zoomWindowFadeOut: 500 }); });

Thanks in advance & Best Regards.

[raysefo]

Here is the html tag: <img id="zoom" src="images/sw.png" data-zoom-image="images/sw_.jpg" width="450" height="253"/>

[raysefo]

I can change the zoom image as follows but how can I change image and zoom image both? ` $(document).ready(function () { $("#tr").click(function () {

            $("#zoom").data('zoom-image', 'images/libelium_smart_world.jpg').elevateZoom({
                zoomType: "inner",
                cursor: "crosshair",
                responsive: "true"

            });
        });
    });`

[chandrantwins]

</div>

$(document).ready(function () { $("#eng").click(function () { $('#zoom').attr('src', 'images/libelium_smart_world.png'); $("#zoom").data('zoom-image', 'images/libelium_smart_world.jpg').elevateZoom({ zoomType: "inner", cursor: "crosshair", responsive: "true"

            });
        });
        $("#tr").click(function () {
            $('#zoom').attr('src', 'images/sw.png');
            $("#zoom").data('zoom-image', 'images/sw_.jpg').elevateZoom({
                zoomType: "inner",
                cursor: "crosshair",
                responsive: "true"

            });
        });
    });

[omarZaoujal99]

Thanks, the @raysefo response helped me ♥