How to open largest version of image in lightbox upon click

Question

I have embedded images in text blocks on my Divi website. I'd like that when the user clicks on the image, the largest/original size of the image opens up in a lightbox (instead of the thumbnail size as stated in the src). I have hundreds of images and therefore would be too time consuming to change the src link on each to the original size url. Could anyone help me on how I can change the src link to point to the largest/original image size and then for it to open in a lightbox upon click? I'm not sure of the JQuery to go about this. I've included below the HTML structure I'm using for each embedded image in the text blocks. I've also included the JQuery snippet I'm currently using. The snippet opens the image in a lightbox but only the thumbnail version (not the largest size possible).

Here are a few examples of the URLs of the images on my site:

• https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg
• https://mydomain/wp-content/uploads/2023/01/myimage.jpg
• https://mydomain/wp-content/uploads/2023/01/myimage-1.jpg

HTML:

<div class="dmpro_timeline_item_description">
  <img decoding="async" loading="lazy" src="https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg" width="235" height="300"  class="wp-image-2129 alignnone size-medium">
  <br>
  <em>Image caption</em>
</div>

JQuery:

<script>
if ( jQuery('.dmpro_timeline_item_description').length > 0 ) {
        jQuery(".dmpro_timeline_item_description p img").each(function(i, e){
            var img_src = jQuery(this).attr("src");
            var img = jQuery(this).parent().html();
            
            var new_elem = jQuery('<a style="color: inherit;" href="'+img_src+'">'+img+'</a>');
           jQuery(this).parent().html(new_elem);
        }); 
    }
    
    jQuery(document).ready(function($){ 
        $(".dmpro_timeline_item_description p").magnificPopup({
            delegate: 'a',
            type: 'image',        
            closeOnContentClick: true,
            closeBtnInside: false,
            mainClass: 'mfp-no-margins mfp-with-zoom',
            gallery:{
              enabled:false,
            },
            zoom: {
                enabled: true,
                duration: 200
            }
        });
    });

</script>

Answer 1

In the snippet below you can see that the width and the height attributes can be toggled.

function toggleLarge(context) {
    if (!context.large) {
        context.large = true;
        context.formerWidth = context.width;
        context.formerHeight = context.height;
        context.removeAttribute("width");
        context.removeAttribute("height");
    } else {
        context.large = false;
        context.width = context.formerWidth;
        context.height = context.formerHeight;
    }
}

for (let img of document.querySelectorAll("img.size-medium")) {
    img.addEventListener('click', function(event) {
        toggleLarge(this);
    });
}

<div class="dmpro_timeline_item_description">
  <img decoding="async" loading="lazy" src="https://www.yourtango.com/sites/default/files/styles/header_slider/public/image_blog/lion-meaning.png?itok=-eB2XSyC" width="235" height="300"  class="wp-image-2129 alignnone size-medium">
  <br>
  <em>Image caption</em>
</div>

If you also need to change the URLs, then you will need to proceed similarly. Since you have not given a sample of large URLs, it's impossible to tell you how to convert the URL to something you did not specify. However, if the "-235x300" part is the problematic, then you can do something like this:

function toggleSrc(context) {
    if (context.large) {
        context.src = context.src.replace(".", "-235x300.");
    } else {
        context.src = context.src.replace("-235x300", "");
    }
}

and call this function in toggleLarge just before the if, passing context. If this is inappropriate to your problem, then you need to provide further information.

EDIT

Initially, for the sake of simplicity, the event listener was defined with the onclick attribute, but I have changed it to be an addEventListener as per Roko C. Buljan's suggestion.

EDIT2

As Roko C. Buljan explained, it's also possible to use forEach instead of a for loop. For those who prefer that syntax, there is another snippet below:

function toggleLarge(context) {
    if (!context.large) {
        context.large = true;
        context.formerWidth = context.width;
        context.formerHeight = context.height;
        context.removeAttribute("width");
        context.removeAttribute("height");
    } else {
        context.large = false;
        context.width = context.formerWidth;
        context.height = context.formerHeight;
    }
}

document.querySelectorAll("img.size-medium").forEach(function(img) {
    img.addEventListener('click', function(event) {
        toggleLarge(this);
    });
});

<div class="dmpro_timeline_item_description">
  <img decoding="async" loading="lazy" src="https://www.yourtango.com/sites/default/files/styles/header_slider/public/image_blog/lion-meaning.png?itok=-eB2XSyC" width="235" height="300"  class="wp-image-2129 alignnone size-medium">
  <br>
  <em>Image caption</em>
</div>

EDIT3

In the snippet below I have implemented the two functions you need based on the comment section's content:

/*
    https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg
    https://mydomain/wp-content/uploads/2023/01/myimage.jpg
    https://mydomain/wp-content/uploads/2023/01/myimage-1.jpg
*/

function thumbnailToLarge(input) {
    return input.substring(0, input.lastIndexOf(".")).split("-").filter((item) => (
        !/[0-9]+x.*[0-9]+/g.test(item)
    )).join("-") + input.substring(input.lastIndexOf("."));
}

console.log("Thumbnail to large: " + thumbnailToLarge("https://mydomain/wp-content/uploads/2023/01/myimage-235x300.jpg"));

function largeToThumbnail(input) {
    return input.substring(0, input.lastIndexOf(".")) + "-235x300" + input.substring(input.lastIndexOf("."))
}

console.log("Large to thumbnail " + largeToThumbnail("https://mydomain/wp-content/uploads/2023/01/myimage.jpg"));
console.log("Large to thumbnail " + largeToThumbnail("https://mydomain/wp-content/uploads/2023/01/myimage-1.jpg"));