Shift in Juxtaposition (no-full-screen-mode)

Submitted by Bibs123 on Tue, 07/12/2022 - 14:57
Forums: 
Bugs in content types

Hello,

I have a problem with juxtaposition. I use the Lumi authoring tool to create H5P content. The problem arises when the content is exported as an HTML file. The first example shows a vertical slider. A piece of the background image remains white at the top and bottom. To me it looks like a shift of the front and back image.

The second example shows a horizontal image slider. This does not create a white area as in the previous example. However, a piece of the foreground and background image is missing in this case. This also looks like a shift between both images to me.

Both problems do not arise when using full-screen-mode.

Do you have any idea what could be the reason for this problem?

Thank you very much in advance.

Best regards

Bianca

H5P file: 
Binary Data Korona-Praktikum Bildvergleich Probe 0 Farbe abstreifen.h5p
Attachments: 
Binary Data Korona-Praktikum Bildvergleich_Probe 0 Tesastreifenabzug.h5p
Content types: 
Image Juxtaposition
otacke's picture

otacke

Wed, 07/13/2022 - 13:11

Hi Bianca!

That was an issue in Image Juxtaposition that only occured when using Lumi, so it has gone undetected so far. I have fixed it, but I don't know when the H5P core team might have ressources to release the fixed version.

So, you could either build the patched versions from the sources on github and install that on Lumi, or you could open Lumi's HTML export file, search for

targetWidth = window.innerWidth - 2;

And replace it with

targetWidth = this.params.container.offsetWidth;

You'll have to do that for all exports though.

Best,
Oliver

Bibs123

Tue, 07/19/2022 - 08:22

Hi Oliver, Thank you - that worked out.

I made the following change in the html file:

key:"resize",value:function(e){var t,n=0,i=e?(this.imageRatio<=e.width/e.height?(i=(t=e.height)*this.imageRatio,n=(e.width-i)/2):t=(i=e.width)/this.imageRatio,"".concat(i,"px")):(t=(i=window.innerWidth-2)

 

Change to: 

key:"resize",value:function(e){var t,n=0,i=e?(this.imageRatio<=e.width/e.height?(i=(t=e.height)*this.imageRatio,n=(e.width-i)/2):t=(i=e.width)/this.imageRatio,"".concat(i,"px")):(t=(i=this.params.container.offsetWidth)/this.imageRatio,"100%")

 

I also tried to download the updated Juxtaposition from GitHub, build with NodeJS and upload the .js file into Lumi (h5p-image-juxtaposition.js). The upload process to Lumi aborts with "Fehler beim Hochladen des Paktes" / "Error uploading package". Do you have any idea what I should change?

Thank you very much again.

otacke's picture

otacke

Wed, 07/20/2022 - 01:30

Hi!

After building the distribution files, you'd need to pack the H5P library with the H5P CLI tool, see https://h5p.org/h5p-cli-guide

Also, if a library with the same version number is supposed to be installed again, H5P core will ignore it. You'd need to remove the library from Lumi first.

Best,

Oliver