Detect the HD image size from the given src and srcset

Question

This is my generated html code with the thumbnail being image-four-300x151.jpg and HD quality being image-four.jpg

<figure class="wp-block-gallery has-nested-images columns-default is-cropped lightbox wp-block-gallery-1 is-layout-flex">
    <figure class="wp-block-image size-medium"><img decoding="async" loading="lazy" width="300" height="151" data-id="218" src="http://localhost/demo/wp-content/uploads/2023/11/image-four-300x151.jpg" alt="" class="wp-image-218" srcset="http://localhost/demo/wp-content/uploads/2023/11/image-four-300x151.jpg 300w, http://localhost/demo/wp-content/uploads/2023/11/image-four-1024x517.jpg 1024w, http://localhost/demo/wp-content/uploads/2023/11/image-four-768x388.jpg 768w, http://localhost/demo/wp-content/uploads/2023/11/image-four.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" data-galley="0" style="cursor: zoom-in;"></figure>
</figure>

Here's the complete JS code below that detects the src and opens the image in a lightbox. However, the ${linkImage} opens image-four-300x151.jpg which is blurry. I want it to open the original HD image which is image-four.jpg.

How do I go about this?

window.addEventListener('load', function () {
const allGallery = [...document.querySelectorAll('.wp-block-gallery')]

let imageGroup = [];
let images = [];
allGallery.forEach((item, index) => {
   let imgs =  item.querySelectorAll('img')
    const imageArray = [];
   imgs.forEach((im) => {
        im.setAttribute('data-galley', index);
        imageArray.push(im);
        images.push(im);
})
imageGroup.push(imageArray);
});
images.forEach(e => e.style.cursor = "zoom-in")
  array = [...images].forEach(item => item.addEventListener('click', handleCreateLightbox))
  function handleCreateLightbox(e) {
    let linkImage = e.target.getAttribute('src')
    let ss = e.target.dataset.galley
    let code = `<div class="cookie_box">
    <div class="cookie_box-content">
      <i class="cookie_box-prev" data-source="${ss}"><svg class="cookie_box-prev" data-source="${ss}" width="22"  viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(-.26458 0 0 .26458 96.472 0)"/></g></svg></i>
      <img
        src="${linkImage}"
        alt=""
        class="cookie_box-image"
      />
      <i class="cookie_box-next" data-source="${ss}"><svg data-source="${ss}" class="cookie_box-next" width="22" viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(.26458 0 0 .26458 -29.78 0)"/></g></svg></i>
    </div>
  </div>`
    document.body.insertAdjacentHTML('beforeend', code)
  }
  let index = 0
  document.addEventListener('click', handleOutLightbox)
  function handleOutLightbox(e) {
    const lightImage = document.querySelector('.cookie_box-image')
    let imageSrc = ''
    if (!lightImage) return
    let galley_id = e.target.dataset.source;

    if (e.target.matches('.cookie_box')) {
      const body = e.target.parentNode
      body.removeChild(e.target)

    } else if (e.target.matches('.cookie_box-next')) {
      imageSrc = lightImage.getAttribute('src')

      index = imageGroup[galley_id].findIndex(item => item.getAttribute('src') === imageSrc)
      index = index + 1
      firstImage = 0
      if (index > imageGroup[galley_id].length - 1) {
        index = firstImage
      }
      ChangeLinkImage(galley_id , index, lightImage)

    } else if (e.target.matches('.cookie_box-prev')) {
      imageSrc = lightImage.getAttribute('src')
      index = imageGroup[galley_id].findIndex(item => item.getAttribute('src') === imageSrc)
      index = index - 1
      lastImage =imageGroup[galley_id].length - 1
      if (index < 0) {
        index = lastImage
      }
      ChangeLinkImage( galley_id, index, lightImage)
    }
  }
  function ChangeLinkImage(galley_id, index, lightImage) {
    const newLink = imageGroup[galley_id][index].getAttribute('src')
    lightImage.setAttribute('src', newLink)
  }
})

Answer 1

The fullsize image url is contained in the the srcset attribute – not in src.

Split srcset and take the last element.

 // get srcset candidates
 let srcSet = im.getAttribute("srcset").split(", ");

 // last candidate is fullsize
 let imgFullsize = srcSet.pop().split(' ')[0]

 // save in data attribute
 im.dataset.fullsize = imgFullsize;

Now you can retrieve the fullsize image from the added data attribute data-fullsize.

window.addEventListener("load", function() {
  const allGallery = [...document.querySelectorAll(".wp-block-gallery")];

  let imageGroup = [];
  let images = [];

  allGallery.forEach((item, index) => {
    let imgs = item.querySelectorAll("img");
    const imageArray = [];
    imgs.forEach((im) => {
      // get srcset candidates
      let srcSet = im.getAttribute("srcset").split(", ");
      // last candidate is fullsize
      let imgFullsize = srcSet.pop().split(' ')[0]
      // save in data attribute
      im.dataset.fullsize = imgFullsize;
      im.setAttribute("data-galley", index);

      imageArray.push(im);
      images.push(im);
    });
    imageGroup.push(imageArray);
  });


  images.forEach((e) => (e.style.cursor = "zoom-in"));
  array = [...images].forEach((item) =>
    item.addEventListener("click", handleCreateLightbox)
  );


  function handleCreateLightbox(e) {

    let linkImage = e.target.dataset.fullsize

    let ss = e.target.dataset.galley;
    let code = `<div class="cookie_box">
    <div class="cookie_box-content">
      <i class="cookie_box-prev" data-source="${ss}"><svg class="cookie_box-prev" data-source="${ss}" width="22"  viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(-.26458 0 0 .26458 96.472 0)"/></g></svg></i>
      <img
        src="${linkImage}"
        alt=""
        class="cookie_box-image"
      />
      <i class="cookie_box-next" data-source="${ss}"><svg data-source="${ss}" class="cookie_box-next" width="22" viewBox="0 0 66.692 126.253" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1"><path d="m360.731 229.075-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z" style="fill:#fff;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(.26458 0 0 .26458 -29.78 0)"/></g></svg></i>
    </div>
  </div>`;
    document.body.insertAdjacentHTML("beforeend", code);
  }
  let index = 0;
  document.addEventListener("click", handleOutLightbox);

  function handleOutLightbox(e) {
    const lightImage = document.querySelector(".cookie_box-image");

    let imageSrc = lightImage.dataset.fullsize;

    if (!lightImage) return;
    let galley_id = e.target.dataset.source;

    if (e.target.matches(".cookie_box")) {
      const body = e.target.parentNode;
      body.removeChild(e.target);
    } else if (e.target.matches(".cookie_box-next")) {
      index = imageGroup[galley_id].findIndex(
        (item) => item.getAttribute("src") === imageSrc
      );
      index = index + 1;
      firstImage = 0;
      if (index > imageGroup[galley_id].length - 1) {
        index = firstImage;
      }
      ChangeLinkImage(galley_id, index, lightImage);
    } else if (e.target.matches(".cookie_box-prev")) {
      imageSrc = lightImage.dataset.fullsize;
      index = imageGroup[galley_id].findIndex(
        (item) => item.dataset.fullsize === imageSrc
      );
      index = index - 1;
      lastImage = imageGroup[galley_id].length - 1;
      if (index < 0) {
        index = lastImage;
      }
      ChangeLinkImage(galley_id, index, lightImage);
    }
  }

  function ChangeLinkImage(galley_id, index, lightImage) {
    const newLink = imageGroup[galley_id][index].dataset.fullsize;
    lightImage.setAttribute("src", newLink);
  }
});

<figure class="wp-block-gallery has-nested-images columns-default is-cropped lightbox wp-block-gallery-1 is-layout-flex">
  <figure class="wp-block-image size-medium">
    <img width="300" height="151" data-id="218" src="https://picsum.photos/id/237/300/150" alt="" class="wp-image-218" srcset="https://picsum.photos/id/237/300/150 300w, https://picsum.photos/id/237/600/600 1024w, https://picsum.photos/id/237/1600/1600 1280w"
      sizes="(max-width: 300px) 100vw, 300px" data-galley="0" style="cursor: zoom-in;"></figure>
</figure>