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)
}
})
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>