removing summary title link with js troubleshoot

Hi all,

I am working on a site about a film festival and am trying to troubleshoot some Javascript I am writing. I pulled the code from this guide: https://css-tricks.com/how-to-disable-links/

This is an example of the page in question: https://naturethroughhereyes.com/program-list/discussion-a-feminine-perspective-in-pictures-salon-rose

As you can see, I have used a summary block to display the thumbnail and title from a gallery that is an "unlinked page". The gallery holds information on all the panelists for all the events at the film festival. Each panelist has an image, a title (their name) and an excerpt text with their bio and what panels they are sitting on.

What I like is that when the user clicks the thumbnail image a lightbox comes up that shows the panelists displayed on this page with their excerpts (bios) displayed. As the user clicks thru these thumbnails, they are constrained to only the thumbnails on the page. Makes sense.

The problem is if the user chooses to navigate via the title link. This link brings the user to the gallery page which is ugly and has ALL the panelists, not just the filtered panelists for this event which is confusing and a weird user experience.

My attempt at a solution is to simply make the

summary-title-link

no longer hyperlink to this gallery page. I looked up how to disable a link and found the css-tricks guide referenced above. I am attempting to implement the "Surefire way" on that guide.

This is what I have in the footer code injector:

<!-- script disabling .summary-title-link links for summary blocks on event pages (to prevent the user from going to the unsightly and useless gallery page for the speaker information) --> 

<script>
/* 
* Use your preferred method of targeting a link
*
* document.getElementById('MyLink');
* document.querySelector('.link-class');
* document.querySelector('[href="https://unfetteredthoughts.net"]');
*/
   document.querySelector('.summary-title-link');
// "Disable" link by removing the href property
   link.href = '';
</script>

As you can test on the published page, the links very much still work. I am almost certain I haven't implemented this correctly but am a little bit out of my depth here.

Can someone help me translate this solution to my use case - it feels like a syntax problem.

If you simply want to disable the links under the images, you can do it with some Custom CSS:

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title {
 pointer-events: none;
}

This worked! Thank you! Much simpler!

This worked! Thank you! Much simpler!