Lightbox Enabled but not working?

Site URL: https://eagle-parakeet-mxae.squarespace.com/case-study-campfire-story

Hey Squarespace folks,

Happy New Year!!

I'm currently updating my website and have encountered an issue with the lightbox functionality. I was wondering if anyone could help me. I've set up a strip gallery section to be 'lightbox enabled', however the images will not display using the lightbox functionality when clicked.

I can see that the magnifying glass cursor is enabled, and sometimes the lightbox glitches when viewed in the page loading section of squarespace (please see the first image attached) – however the images are showing with the lioghtbox functionality when the website is loaded as if a user would be viewing it.

Does anyone have any ideas for what might be affecting this?

My temp site is url is: https://eagle-parakeet-mxae.squarespace.com/case-study-campfire-story

Temp Password: lightbox

Many thanks,

Jody

Remove all code in Code Injection Header & Footer then check again.

 Hey @tuanphan,

Happy New Year! Thanks so much for the reply!

I've just tried removing all of the header and footer code, and the lightbox works.

Although, it's removed the functionality of my Mega Menu. I used a plugin for this function, and have looked in the uploaded JS file, which the plugin uses, but I can't identify what might be affecting the missing lightbox functionality.

Do you mind having a look at the bit of JS code below to see if there is anything glaringly obvious that might be causing the lightbox not to work?

Any help would be much appreciated! Thanks for your time!

Kindest regards,

Jody 🙂

  function reinitSiteLifecycle(){const bundleScript=document.querySelector('script[src$="site-bundle.js"]');if(bundleScript){const bundleScriptClone=document.createElement("script"),bundleScriptParent=bundleScript.parentNode;bundleScriptClone.src=bundleScript.getAttribute("src"),bundleScriptParent.removeChild(bundleScript),bundleScriptParent.appendChild(bundleScriptClone)}}

  $('.header-nav-folder-title[href^="/menu-"]').each(function() {
    var link = $(this).attr('href');
    var idName = link.slice(6);
    $(this).parent().addClass('folder');
    $(this).parent().after('<div id='+idName+' class="mega"></div>'); 
    $('#'+idName).load('/mega-' + idName + ' #page',function(){
      window.Squarespace.initializeLayoutBlocks(Y);
      reinitSiteLifecycle();
    });
  })
  

Hi @jodydd

I've just come across the same issue on a site I am working on! Also using a mega menu and now having glitchy issues with lightbox functionality on my gallery section. Did you manage to find a solution?

Thanks!

Roxy

On 1/6/2021 at 10:41 PM, jodydd said:

 

 

 Hey @tuanphan,

Happy New Year! Thanks so much for the reply!

I've just tried removing all of the header and footer code, and the lightbox works.

Although, it's removed the functionality of my Mega Menu. I used a plugin for this function, and have looked in the uploaded JS file, which the plugin uses, but I can't identify what might be affecting the missing lightbox functionality.

Do you mind having a look at the bit of JS code below to see if there is anything glaringly obvious that might be causing the lightbox not to work?

Any help would be much appreciated! Thanks for your time!

Kindest regards,

Jody 🙂

  function reinitSiteLifecycle(){const bundleScript=document.querySelector('script[src$="site-bundle.js"]');if(bundleScript){const bundleScriptClone=document.createElement("script"),bundleScriptParent=bundleScript.parentNode;bundleScriptClone.src=bundleScript.getAttribute("src"),bundleScriptParent.removeChild(bundleScript),bundleScriptParent.appendChild(bundleScriptClone)}}

  $('.header-nav-folder-title[href^="/menu-"]').each(function() {
    var link = $(this).attr('href');
    var idName = link.slice(6);
    $(this).parent().addClass('folder');
    $(this).parent().after('<div id='+idName+' class="mega"></div>'); 
    $('#'+idName).load('/mega-' + idName + ' #page',function(){
      window.Squarespace.initializeLayoutBlocks(Y);
      reinitSiteLifecycle();
    });
  })
  

 

 

 

can you post mega code & lightbox code? We can check easier.

If you can't post code public, you can send via private message