Custom photo gallery module not working

[JBartemes]

Hello!

I am working on a photo gallery module and I haven't been able to get it to work. I am very new to coding, so I am struggling to figure out what is wrong.

The video I am using as a guide is fairly old:
https://www.youtube.com/watch?v=gEV_JPlLXhs

But i thought I replicated it very well except in the JS area. The code is not working - the images are opening in a different browser instead of doing a light box effect like in the video.

Below is my code:

HTML:

<!--654671552-->

<div class="gallery">
{% set gallery = hubdb_table_rows('654671552') %}
{% for img in gallery %}
<a class="gallery_image" href="{{ resize_image_url(img.image.url, 1200, 0, 0) }}" title="{{ img.description }}">
<img src="{{ resize_image_url(img.image.url, 550, 0, 0) }}" alt="{{ img.description }}" >
</a>
{% endfor %}

</div>

CSS:

.gallery {
columns: 3;
padding: 2rem;
width: 100%;
}

.gallery_image {
display: block;
max-width: 100%;
margin-bottom: 1em;
}

.gallery_image img {
max-width: 100%;
display: block;
}

.gallery_overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba (0,0,0,.9);
z-index: 1000000;
}

.gallery_overlay close {
position: absolute;
top: 2em;
right: 2em;
background: transparent;
color: #fff;
font-size: 1.5em;

}

.gallery_image wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 1200px;
}

.gallery_image wrapper img {
max-width: 1200px;
}

JS:

$('.gallery_image').on('click', function(e){
e.preventDefault();
console.log();

var url = $(this).attr('href'),
title = $(this).attr('title');

$('body').append('div class"gallery_overlay"><button class="close">close</button><div class="gallery_image--wrapper"><img src="' + url + '" alt=""' + title + '"><p>' + title + '</p></div></div>');

})-->

function closePopup(){
$('.gallery_overlay').hide('400', function();{
$(this).remove();

});
};

$(body).on('click', '.close', function(e){
closePopup();
});

Thanks in advance for any help!

[alyssamwilie · Accepted solution]

Your JavaScript is not plain JavaScript, it's JQuery. If you do not have JQuery included in the module/website then the code is not going to work. This is why you're getting "$ is not defined" because $ is a JQuery specific selector.

HubSpot has a global JQuery option that can be turned on, but it's a rather old version of JQuery as they've stopped support for it: https://knowledge.hubspot.com/website-pages/include-jquery-across-your-hubspot-pages The video you're referencing is from 7 years ago, at a time when HubSpot had this turned on in portals by default so that's probably why they don't bother mentioning they're using JQuery.

You can download JQuery or get CDN here: https://jquery.com/download/

Though I'd suggest just updating your code to plain JavaScript instead of adding an entire library for a single module.

[alyssamwilie · Accepted solution]

Your JavaScript is not plain JavaScript, it's JQuery. If you do not have JQuery included in the module/website then the code is not going to work. This is why you're getting "$ is not defined" because $ is a JQuery specific selector.

HubSpot has a global JQuery option that can be turned on, but it's a rather old version of JQuery as they've stopped support for it: https://knowledge.hubspot.com/website-pages/include-jquery-across-your-hubspot-pages The video you're referencing is from 7 years ago, at a time when HubSpot had this turned on in portals by default so that's probably why they don't bother mentioning they're using JQuery.

You can download JQuery or get CDN here: https://jquery.com/download/

Though I'd suggest just updating your code to plain JavaScript instead of adding an entire library for a single module.

[JBartemes · Accepted solution]

Lifesaver! This worked!

Just for future users, this is what my code ended up being:

HTML:

<!--654671552-->

<div class="gallery">
{% set gallery = hubdb_table_rows('654671552') %}
{% for img in gallery %}
<a class="gallery__image" href="{{ resize_image_url(img.image.url, 1200,0,0) }}" title="{{ img.image_description }}">
<img src="{{ resize_image_url(img.image.url, 550, 0, 0) }}" alt="{{ img.image_description }}" >
</a>
{% endfor %}

</div>

CSS:

.gallery {
column-count: 3;
padding: 2rem;
width: 100%;
}

.gallery__image {
display: block;
max-width: 100%;
margin-bottom: 1em;
}

.gallery__image img {
max-width: 100%;
display: block;
}

.gallery__overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
opacity: 1;
transition: opacity 0.4s;
}

.gallery__overlay .close {
position: absolute;
top: 20px;
right: 20px;
z-index: 1000;
background: white;
color: black;
border: none;
padding: 8px 12px;
cursor: pointer;
}

.gallery__image--wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 1200px;
}

.gallery__image--wrapper img {
max-width: 1200px;
}

JS:

document.querySelectorAll('.gallery__image').forEach(image => {
image.addEventListener('click', function (e) {
e.preventDefault();

const url = this.getAttribute('href');
const title = this.getAttribute('title');

const overlay = document.createElement('div');
overlay.classList.add('gallery__overlay');

overlay.innerHTML = `
<button class="close">close</button>
<div class="gallery__image--wrapper">
<img src="${url}" alt="${title}">
<p>${title}</p>
</div>
`;

document.body.appendChild(overlay);
});
});

function closePopup() {
const overlay = document.querySelector('.gallery__overlay');
if (overlay) {
overlay.style.opacity = '0';
setTimeout(() => overlay.remove(), 400);
}
}

document.body.addEventListener('click', function (e) {
if (e.target.matches('.close')) {
closePopup();
}
});

Thank you so much!!

[JBartemes]

I did some chat GPT and i found the syntax errors, but the preventDefault is not working. When I console log it, I get an error message that says:

Uncaught ReferenceError: $ is not defined
at multiform?fileName=Photo%20Gallery&hsPreviewerApp=module&hs_preview_key=cBHDQ4yOM9KNhSyhFLIeHw&isJsModule=false&is_buffered=true&language=en&module_id=242290400956&portalId=46754353&updated=1758567903767&hs-expires=1758571670&hs-signature=AE7aT7waDm_5-gSME08kA1hIJnPxiFAJgw:131:5
at multiform?fileName=Photo%20Gallery&hsPreviewerApp=module&hs_preview_key=cBHDQ4yOM9KNhSyhFLIeHw&isJsModule=false&is_buffered=true&language=en&module_id=242290400956&portalId=46754353&updated=1758567903767&hs-expires=1758571670&hs-signature=AE7aT7waDm_5-gSME08kA1hIJnPxiFAJgw:150:5

I am not sure what this means, as I have copied the code frojm the video exactly.

[STierney]

Hey @JBartemes - thanks for following up here!

@HBee - any ongoing thoughts on this last update that may assist with solving for the error?

Shane, Community Manager

[JBartemes]

I'm sorry, this still isn't working for me. I don't see where I made an error.

[HBee]

Fix the broken HTML you’re appending, use the same class names everywhere, clean up the CSS selectors, and correct the small typos in your JavaScript. Once you align those, the lightbox will work instead of sending the image to a new browser tab.