H5P image slider not appearing, no error message, just no image

Submitted by erinlowell on Wed, 08/01/2018 - 14:00
Forums: 
Bugs in content types

Hello, 

I'm using the image slider and it's behaving inconsistently.

Browser: Chrome

Wordpress Version:  4.9.6

Theme: Education Zone

LMS:  LearnDash

Also using WP Bakery Page Builder and Outerbridge Nested Shortcodes Plugin

Here's a video of the behavior:  https://screencast.com/t/vZtZM9InVBl

I checked with the Outerbridge Nested Shortcodes Plugin author and he could not find any errors and seemed to think the issue was with H5P.

Any direction or solution would be appreciated!

 

 

thomasmars's picture

thomasmars

Mon, 08/06/2018 - 14:22

Hi,
The issue you're seeing is due to the fact that the accordion is hiding everything inside itself, so the H5P has no size when it is initialized. When you open the accordion the container the H5P is in will be shown, but the H5P doesn't know that it should resize itself to fit within its container cause it is now showing. There's no way for the H5P to handle this as the visibility is controlled from the outside where the H5P has no control, so you as the page owner or the plugin must inform the H5P that it is now visible and that it should resize. This is what happens when you open the console, or if you resize the browser window, or if you would change the size of the container that the H5P is placed within by any amount of pixels.

This is explained in detail in our "Display H5Ps with 3rd party JavaScript", and the essence is that you have to 'resize' the container of the H5P when the accordion is showing, or trigger the 'resize' event to the browser window to let H5P know that it is time to resize.

Good luck. Best regards, Thomas