Overview

Some themes or site designs may conflict with the Listings Pro lightbox/gallery experience by displaying a sticky header over listing images.

This customization hides the sticky header while the IDX lightbox is open, then restores it after the lightbox is closed.

Requirements

• An active Platinum level IDX Broker account
• Listings Pro Details Template enabled
• Access to:
  • Design → Website → Sub-Headers

Setup Instructions

Step 1: Navigate to Details Subheader

In your IDX Broker account:

1. Go to:
   • Design → Website → Sub-Headers
2. Select:
   • Pages tab at the top
3. In the left sidebar, select:
   • Details

Step 2: Enable HTML Editing

• Ensure the WYSIWYG editor is enabled
• Click the blue HTML button

Step 3: Add the Script

Paste the following code into the Details subheader:

<script type="text/javascript">
window.addEventListener("load", function(event) {

    // Watch for lightbox changes
    var observerLightBox = new MutationObserver(function(mutations) {

        mutations.forEach(function(mutationRecord) {

            // Hide sticky header elements
            var headerImage = document.getElementsByClassName('edgtf-title-image')[0].style.display = 'none';

            var headerHolder = document.getElementsByClassName('edgtf-title-holder')[0].style.display = 'none';

            // Detect lightbox close button
            var exitLightBox = document.getElementsByClassName("idx-lightbox__button-dismiss");

            var exitfunction = function(){

                // Restore sticky header after lightbox closes
                var headerImage = document.getElementsByClassName('edgtf-title-image')[0].style.display = 'inline-block';

                var headerHolder = document.getElementsByClassName('edgtf-title-holder')[0].style.display = 'inline-block';
            }

            for (var z = exitLightBox.length - 1; z >= 0; z--) {
                exitLightBox[z].addEventListener('click', exitfunction, false);
            }

        });

    });

    var lightBox = document.getElementsByClassName('idx-lightbox__outer')[0];

    // Start observing lightbox changes
    observerLightBox.observe(lightBox, {
        attributes : true,
        attributeFilter : ['style']
    });

});
</script>

How It Works

This script:

1. Detects when the Listings Pro lightbox opens
2. Hides the sticky header elements
3. Watches for the lightbox close action
4. Restores the sticky header after closing

Important Notes

• This customization is theme-specific
• The script targets these classes:
  • edgtf-title-image
  • edgtf-title-holder

If your theme uses different class names, modifications may be required.

Troubleshooting

Header not hiding

• Confirm Listings Pro is enabled
• Verify the class names match your theme

Header not returning after closing lightbox

• Check for JavaScript conflicts
• Verify the lightbox close button class still exists:
  • idx-lightbox__button-dismiss

Script not working

• Ensure the script was added in HTML mode
• Check browser console for JavaScript errors

Additional Notes

• This customization improves image viewing on listing details pages
• Particularly useful for themes with large sticky headers or overlays
• Additional styling adjustments may be required depending on theme structure

Support

If you have questions or run into issues, contact:
developers@idxbroker.com

🤖 Zendesk AI / Answer Bot Intents

Intent: Hide sticky header on Listings Pro

User might ask:

• “How do I hide the sticky header on listing photos?”
• “Why is my header covering the lightbox?”

Answer:
You can add a custom JavaScript snippet to the Details subheader that hides the sticky header when the Listings Pro lightbox opens and restores it after closing.

Intent: Listings Pro lightbox issue

User might ask:

• “Why is my header overlapping listing images?”

Answer:
Some sticky headers conflict with the Listings Pro lightbox. A custom script can temporarily hide the header during image viewing.

Intent: Script not working

User might ask:

• “Why isn’t the sticky header script working?”

Answer:
Verify the script was added in HTML mode and confirm your theme uses the expected class names (edgtf-title-image and edgtf-title-holder).

Intent: Customize Listings Pro

User might ask:

• “Can I customize Listings Pro behavior?”

Answer:
Yes. Listings Pro can be customized using JavaScript, CSS, and subheaders to modify layouts and interactions.