Modal Lightbox Observe Changes

Modal Lightbox Observe Changes

License

Synopsis

Observe changes to the modal lightbox and call custom callbacks as nodes are added to the DOM.

Version

• 0.2.0

SS Versions

• 7.1

• 7.0

v7.1 Fluid Engine Compatible

• Not Applicable

Dependencies

• Squarespace plan that supports JavaScript.

---

Install Options

• CDN Hosted

  Use this option for the quickest way to install this effect (files hosted externally on the jsDelivr, a CDN)

  • Options

    • Page Specific

      • Use this option if you want to have this effect on only one Page.

      • Add the following code to Page Settings > Advanced > Page Header Code Injection for the Page.

        <!-- begin TWC Modal Lightbox Observe Changes -->
        
          <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
          
          <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ee9fb8db0a1f734e2a1fa27d06b9dfdb999cc7b4/Element/Modal%20Lightbox%20Observe%20Changes/modal%20lightbox%20observe%20changes.min.js" type="module"></script>
          
          <!-- end TWC Modal Lightbox Observe Changes -->
          

      • Refer to per-page code injection for details.

    • Site-wide

      • Use this option if you want to have this effect on all Pages.

      • Add the following code to Website > Pages > Custom Code > Code Injection > FOOTER.

        <!-- begin TWC Modal Lightbox Observe Changes -->
        
          <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
          
          <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@ee9fb8db0a1f734e2a1fa27d06b9dfdb999cc7b4/Element/Modal%20Lightbox%20Observe%20Changes/modal%20lightbox%20observe%20changes.min.js" type="module"></script>
          
          <!-- end TWC Modal Lightbox Observe Changes -->
          

      • Refer to Add code to code injection for details.

• On-site

  Use this option to install the full code of this effect (files hosted on your site).

  • Page Specific

    • Use this option if you want to have this effect on only one Page.

    • Add code from file modal lightbox observe changes.html to Page Settings > Advanced > Page Header Code Injection for the Page.

    • Refer to per-page code injection for details.

  • Site-wide

    • Use this option if you want to have this effect on all Pages.

    • Add code from file modal lightbox observe changes.html to Website > Pages > Custom Code > Code Injection > FOOTER.

    • Refer to Add code to code injection for details.

Callback Example

You can create callback functions to customize the processing of the modal lightbox element.

Your callbacks must accept an element as a parameter.

<script>

  // initialize twc module
  
  window.twc = ( ( self ) => self ) ( window.twc || { } );
  
  // initialize twc mloc sub-module
  
  twc.mloc = ( ( self ) => self ) ( twc.mloc || { } );
  
  // initialize twc mloc callbacks sub-module
  
  twc.mloc.callbacks = ( ( self ) => {
  
    const callback = ( element ) => {
    
      console.log ( 'twc mloc log : ', element );
      
      };
      
    self.push ( callback );
    
    return self;
    
    } ) ( twc.mloc.callbacks || [ ] );
    
  </script>

Note

This code is a base for other effects.

Make a Donation

Please consider making a donation.

Changes

• 2026-01-01

  • updated to use module pattern for adding callbacks
  • updated to work with upcoming Squarespace Product Form Markup Changes
  • bumped version to 0.2.0

• 2024-05-23

  • minor tweaks, no functional changes
  • bumped version to 0.1.1

• 2024-05-01

  • initial version