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:
- Go to:
- Design → Website → Sub-Headers
- Select:
- Pages tab at the top
- 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:
- Detects when the Listings Pro lightbox opens
- Hides the sticky header elements
- Watches for the lightbox close action
- Restores the sticky header after closing
Important Notes
- This customization is theme-specific
- The script targets these classes:
edgtf-title-imageedgtf-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.