@midzer I just noticed that we still have an alpha version on https://www.npmjs.com/package/tobii released. Any chance to update the version there as well?

Hello! I've setup a CodePen to point out two issues I'm seeing, the first of which is unwanted grouping.

When I have more than one lightbox element and I do not use the data-group attribute, the lightbox behaves as if I did. See it, here:

https://codepen.io/marcamos/pen/NWxaMXQ

The code contains such a line https://github.com/rqrauhvmra/tobii/blob/ac432322c09dc30eba853a17b252250ba87ed453/src/js/tobii.js#L1234 Can you find out what it is for? Because it does not provide the ability to scale with a gesture.

Close button and counter float on the picture in mobile if the picture is stretched in height.

I fixed it like this:

.tobii__slider {
    top: 5em;
}

[data-type] {
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
}

    [data-type] > figure {
        max-height: 100%;
    } 

In Chrome, dragging between images is not working in version 2.3.0 (was working in 2.2.0). One can see this feature is not working by trying to drag in the Images (grouped) demo.

1. Zoom icon is nice to have, but sometimes it must be disabled. Right now having button with image inside, zoom icon will appear and it will not look good.

Solution could be checking for data-zoom="false".

2. using inline SVG for zoom icon for each of link is bad for performance. CSS should be used. Even it is not big deal, but having this activated by default for bis site will be a problem for performance. There is good tip:

If we need SVG(s) for backgrounds but they are < than 5k each: .bg { background: url('data:image/svg+xml;utf8,<svg ...> ... '); }

If we need SVG(s) for backgrounds but they are > than 5k each: .bg { background: url('images/file.svg'); }

Animation on second and third gallery items works only if you wait before opening second slide. If you open gallery and try to load next and next and next item fast, there will be no animation, but it will appear for other items.

As this title the doesnt like images containing a query string (like those coming from the Shopify CDN). This was fixed on the first version of Tobi, but doesnt seem to have been carried over to Tobii.

This is WIP to try a rollup config which also exports an ESM version. With the ESM version I was able to reduce the file size of a custom build via npm/webpack by ~44%.

At the moment I'm not sure if a cjs version is needed. Going to review the config of some related projects.

To reproduce the issue, please do the following in the fiddle: https://jsfiddle.net/s56k8aum/3/

1. Add First Image
2. Remove First Image
3. Add First Image (this causes exception)

Could you please maybe add a method similar to reset or something and call it "refresh"? Basically "refresh" would walk the DOM and refresh based on changes in the DOM.

Hi, I need to show HubSpot form inside a Tobii lighbox. The form rendered correctly with the release v2.2.0.

The form type in HubSpot is "raw HTML form" and is rendered inline via JavaScript, so it's not an iframe embed.

// code to create the HubSpot form

hbspt.forms.create({
        portalId: 'xxx',
        formId: 'xxx',
      });

v.2.3.0 does not render the form either. Can you please check what could have broke this with these releases. Thanks.

If users will open modal dialog on Inline HTML elements, close button may not be visible if matching all conditions below:

1. at least if device is mobile android (chrome). Sadly chrome mobile emulator does not reproduce this bug !
2. inline dialog has lots of content (scrollbar activates).

To reproducer it:

1. edit https://midzer.github.io/tobii/demo/ and add lots of content for "Inline HTML" section to force scrollbar to appear.
2. open it on mobile (android, Chrome) and open "Inline HTML" modal window
3. most of close button will not be visible .

What happens?

There is CSS rule .tobii__slide [data-type] with value of: max-height: var(--slide-max-height); or max-height: calc(100vh - 2.77778em). Because this element is centered, layout shifts to top and hides most of close button. But I can not understand why desktop chrome and mobile chrome renders this situation in different ways.

Possible solution

Replace above line to: max-width: 100%.

p.s. more testing must be made before this can be updated.

Old rqrauhvmra tobi-library worked with multiple instances. Why the support has been dropped?

Would it be possible to add a guid to class names (or as a user defined classname as input parameter) instead of hard coded names so the lightbox would work if there are multiple instances of it.

Hi there!

I was just randomly checking the color contrast of the prev and next buttons. I noticed they're set to opacity: .5 and aren't being updated to opacity: 1 on :hover or :focus.

Is this the intended behaviour or just a bug?

Thanks!

Hello, it seems that the counter does not recalculate after an item is removed.

1. i add several images to the lightbox -> counter is right
2. i remove an image -> counter is wrong (shows too much items, numbers are mixed)

Is there any workaround or quick fix?

Thanks in advance! Maxi

Naming of tobii's custom properties interferes with local custom properties due to generalized naming like --button-background or --button-color, set on :root level. A possible solution would be to scope variables inside tobii's parent node or to prefix everything, e.g. --tb-button-background.

Thanks!

Hi,

I'm assuming it is possible to include multiple You Tube videos in a gallery arrangement? At the present time if I open one You Tube video in a light box then close it the next video opens the same ID at the same time point.

Thanks in advance.

Chris