Infant coder here, used a template for my site where I wanted to showcase my work. The problem is the UX is really bad; in my portfolio section, I want the users to click on one of the images so it opens a new tab, instead of zoom in on a photo. I’ve tried to modify the JS and create a new function new tab but when I do that it stops all the other scrips on the page and no info shows up. Maybe someone on here can help? Here’s the link to the template I’ve used: https://templateflip.com/templates/super-folio/
here’s the part of the code that’s tripping me up:
/**
* Big Picture Popup for Photo Gallary
*/
document.querySelectorAll(".bp-gallery a").forEach((function(e) {
var caption = e.querySelector('figcaption')
var img = e.querySelector('img')
// set the link present on the item to the caption in full view
img.dataset.caption = '<a class="link-light" target="_blank" href="' + e.href + '">' + caption.innerHTML + '</a>';
window.console.log(caption, img)
e.addEventListener("click", (function(t){
t.preventDefault();
BigPicture({
el: t.target,
gallery: '.bp-gallery',
})
})
)
}))
When I changed it, I did:
/**
* Big Picture Popup for Photo Gallary
*/
document.querySelectorAll(".bp-gallery a").forEach((function(e) {
var caption = e.querySelector('figcaption')
var img = e.querySelector('img')
function NewTab() {
window.open(
"a", "_blank");
)
}))
Which worked, but made all of the other text on the page disappear or unresponsive.
Any help you could provide would be great!