Jump to content

Lightbox Enabled but not working?

Recommended Posts

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

1157587747_Screenshot2021-01-05at12_21_24.thumb.png.0794b2c03b1a2a68914181b744ce1316.png1332111864_Screenshot2021-01-05at12_21_48.thumb.png.bb7f4f93515bf26efe440ad768503481.png

 

Link to comment
  • Replies 4
  • Created
  • Last Reply

 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();
    });
  })
  

 

 


 

Link to comment
  • 1 month later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.