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

wants to merge 1 commit into
base: master


None yet
6 participants

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:

    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.


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


This comment has been minimized.


tomscholz commented May 22, 2017

Can somebody also test this in ie and edge?


This comment has been minimized.

bugsoftware commented Nov 19, 2017

When will this merge happen?


This comment has been minimized.


Dogfalo commented Nov 21, 2017

materialbox was rewritten so this can't be merged

@Dogfalo Dogfalo closed this Nov 21, 2017


This comment has been minimized.

ITfee commented Feb 12, 2018

@Dogfalo So srcset support in Materialize will never happen?


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