Back to Troubleshooting Guides

Troubleshooting

Hidden Images Don’t Work

This guide applies to:

  • Basic
  • Professional

Introduction

Sometimes, Draw Attention has trouble displaying interactive images within lightboxes, tabs, and accordions. This is usually a quick fix that does require some JavaScript. Read on to learn more about what to do when hidden images don’t work.

We would also recommend taking a look at our guide on images never loading and using Plugin Detective to determine conflicts.

JavaScript Snippet for Hidden Images

When hidden images don’t work within accordions and tabs, it’s time to get creative. The following snippet will make it so that switching to that particular toggle in the tab will load the interactive image and its following hotspots correctly.

This snippet initializes the Draw Attention hotspots when an element that you specify on your page is clicked.

<script>
jQuery('.YOUR-TABS-CLASS-NAME-HERE').on('click', function(){
setTimeout(function() {
hotspots.init();
}, 100);
});
</script>

You will have to replace .YOUR-TABS-CLASS-NAME-HERE with the CSS class of the tab that the interactive image is hiding within.

Adding the JavaScript with Ease

A quick way to add this JavaScript to your page would be to utilize the free Headers & Footers plugin.

When hidden images don't work, insert the JavaScript snippet within your site.

WPBeginner also has a really neat article on walking you through how to use that particular plugin.

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides