New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support srcset and sizes attributes for materialbox.js #3468

Closed
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
6 participants
@bcole808

bcole808 commented Aug 5, 2016

Responsive images with the srcset and sizes property set allow the browser to dynamically download a larger source file as needed when the browser or image size changes.

This pull request adds support for images that use these properties:

<img 
    class="materialboxed" 
    width="650" 
    src="sample.jpg" 
    srcset="sample-thumbnail.jpg 200w, sample-large.jpg 800w" 
    sizes="(max-width: 200px) 100vw, 200px" />

When the image is expanded, materialbox.js will now update the sizes attribute (if present) to match the larger size that the image is about to be displayed at.

It will also reset the sizes attribute to its original value when returnToOriginal() is called.

For sites that use these properties along with materialboxed, this pull request enables the thumbnails to be displayed with small source files, and the browser will download the appropriate larger file when the image is expanded.
#2452

@ITfee

This comment has been minimized.

ITfee commented May 22, 2017

@bcole808 Tested this in three browsers:

Firefox = OK
Chrome = the thumbnail image has the right size, but its source is the large version instead of thumbnail version
Huawei Browser = when touching thumbnail, the thumbnail image is maximized instead of loading the large version of it

@tomscholz

This comment has been minimized.

Contributor

tomscholz commented May 22, 2017

Can somebody also test this in ie and edge?

@bugsoftware

This comment has been minimized.

bugsoftware commented Nov 19, 2017

When will this merge happen?

@Dogfalo

This comment has been minimized.

Owner

Dogfalo commented Nov 21, 2017

materialbox was rewritten so this can't be merged

@Dogfalo Dogfalo closed this Nov 21, 2017

@ITfee

This comment has been minimized.

ITfee commented Feb 12, 2018

@Dogfalo So srcset support in Materialize will never happen?

@Artem-Schander

This comment has been minimized.

Artem-Schander commented Jul 21, 2018

Hi everyone, i thought i share my workaround:

M.Materialbox.init(document.querySelectorAll('.materialboxed'), {
    onOpenStart: el => {
        if (el.hasAttribute('data-large-src')) {
            const largeSrc = el.getAttribute('data-large-src');
            el.setAttribute('src', largeSrc);
        }
    },
    onCloseEnd: el => {
        if (el.hasAttribute('data-small-src')) {
            const smallSrc = el.getAttribute('data-small-src');
            el.setAttribute('src', smallSrc);
        }
    }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment