1. File Path and Code Injection Checks

• Tip: Double-check that all JavaScript and CSS files are correctly uploaded and linked in the right locations. For users on personal plans without Code Injection, recommend using a markdown block instead.

• Common Issue: Missing files or incorrect paths lead to the lightbox not triggering or displaying content.

• Quick Fix: Test each file path in the browser (e.g., paste the JavaScript URL directly into the browser) to confirm it loads correctly.

2. Correct Trigger Link Format

• Tip: Ensure the trigger link format uses #lightbox or the appropriate ID assigned to the lightbox.

• Common Issue: Users often forget to include the hashtag or use an incorrect ID, which prevents the lightbox from opening.

• Quick Fix: After setting the trigger, click the link to test if it activates the lightbox overlay.

3. CSS Conflicts and Display Adjustments

• Tip: Inspect the lightbox element using the browser’s developer tools to check if any custom CSS or conflicting styles are affecting its appearance.

• Common Issue: The lightbox content may appear with minimal height (like a 1-pixel line) or not display images or videos correctly.

• Quick Fix: Reset image and video block settings within the lightbox, and ensure no global CSS settings interfere with the layout.

4. Mobile Responsiveness Tweaks

• Tip: Use CSS media queries to adjust lightbox size, positioning, and visibility specifically for mobile screens.

• Common Issue: The lightbox may not scale well on mobile or display incorrectly.

• Quick Fix: Add custom CSS targeting smaller screens, like @media (max-width: 600px) { /* CSS adjustments here */ }, to refine mobile appearance.

5. Handling JavaScript Errors

• Tip: Use the browser’s console (found in developer tools) to check for JavaScript errors when the lightbox isn’t triggering.

• Common Issue: Other scripts on the page may conflict with the lightbox, leading to console errors.

• Quick Fix: Look for errors related to the lightbox script and try temporarily disabling other custom scripts to identify conflicts. Ensure the lightbox script is the last one loaded on the page.

6. Video and Audio Autoplay

• Tip: Be aware that browser autoplay restrictions often prevent videos from playing sound automatically within a lightbox.

• Common Issue: Users expect videos to autoplay with sound, but this is commonly blocked.

• Quick Fix: Advise users to add a note encouraging viewers to unmute videos manually. Some browsers also allow autoplay if the video is muted by default.

7. Applying Multiple Triggers on the Same Page

• Tip: Assign unique IDs for each lightbox instance if using multiple lightboxes on the same page.

• Common Issue: Multiple triggers may not work correctly without unique identifiers, causing only the first or last lightbox to activate.

• Quick Fix: Use unique IDs for each trigger and corresponding lightbox, then adjust the link format accordingly (e.g., #lightbox1, #lightbox2).

8. Delayed Pop-Ups and Advanced Triggering

• Tip: Implement JavaScript snippets to set delays for the lightbox, enabling timed or scroll-based pop-ups.

• Common Issue: Users want delayed lightbox pop-ups, which the standard setup doesn’t provide.

• Quick Fix: Provide a JavaScript snippet for adding a delay, e.g., setTimeout(function(){ /* lightbox trigger code here */ }, 5000); for a 5-second delay.