Hi, i am using showtime theme and am trying to figure where and what code to add so that i can make it when a customer clicks the product image it pops up full size in a new window or new tab. Currently it is setup where when you hover over it the image zooms a little bit (i am also wondering how to increase that zoom)
this is my site. https://alanrichardtextiles.com/products/best-goose-down-king-pillow
thank you
Hi @alanrichardtex ,
I tried hovering and clicking on the image, but I didn’t see the image zoom in at all. Could there be an issue with them?
However, you can use the following script to handle clicking to open image in a new tab for the images on the product page.
if(window.location.pathname.indexOf('/products/') !== -1) {
const productMedia = document.querySelectorAll('[class="#media-image-wrapper"]')
if(productMedia && productMedia.length > 0) {
productMedia.forEach((media) => {
const image = media.querySelector('img');
if(image) {
image.addEventListener('click', (event) => {
if(event.target.src) {
const altImage = event.target.getAttribute('alt');
if(altImage) {
const allImage = document.querySelectorAll(`img[alt='${altImage}']`);
if(allImage && allImage.length > 1) {
window.open(allImage[1].src)
} else {
window.open(event.target.src)
}
}
}
})
}
})
}
}
You can place the above code snippet at the end of global JS files (for example: global.js, theme.js, …) in the ‘edit code’ section (illustrated image below).
Hope the above suggestions can assist you. If they are helpful, don’t forget to like and mark the solution, so we are motivated to support you further.
I’m pasting two links to screen recordings in this reply. one is a video of how the current zoom shows (not sure why it did not show when you checked)
the second is my theme codes. I did not see a global.js or theme.js file. can you please have a look at the second screen recording and tell me which of those files it would go into?
Thank you
actually i think i found the correct file. i pasted it at the botton of the core.js file and that seems to have worked. please let me know if thats not correct. and thank you!
so the only issue i see happening now is that with this code installed, it is opening a new window when i click the picture, but it is also opening a new window when i try to view any other product images on the page.. for example in the link i’ll include below, there are 10-15 images for the product. when you click one of the small thumbnails it should load that image as the main product image just to be seen bigger. and then when you click that big image it should do the new window. but currently with the code you gave me it opens a new window even when i click the small thumbnails. is there a way to make it so it only opens a new window when the big image is clicked?
https://alanrichardtextiles.com/products/somfy-situo-5-channel-remote-pure
Thank you
You can add the following code back into the core.js file you found
if(window.location.pathname.indexOf('/products/') !== -1) {
const productMediaZoom = document.querySelectorAll('product-gallery-zoom');
if(productMediaZoom && productMediaZoom.length) {
productMediaZoom.forEach((item) => {
const productMedia = item.querySelectorAll('[class="#media-image-wrapper"]')
if(productMedia && productMedia.length > 0) {
productMedia.forEach((media) => {
const image = media.querySelector('img');
if(image) {
image.addEventListener('click', (event) => {
if(event.target.src) {
window.open(event.target.src)
}
})
}
})
}
})
}
}
The above code will help you open big image in new tab.
If they are useful, don’t hesitate to like and mark solution this post
Thank you!!