Added data-external for external source of materialboxed image showed… #4085

wants to merge 3 commits into


None yet

2 participants

ivellios commented Jan 10, 2017 edited

… with overlay; Also added example to documentation;

Materialbox does not support external source, so showing thumnails that will display overlayed full-size image once clicked is impossible.

I found PR with concept of solution for that: #2798
But the commit contains some bugs (like it does not change src to thumbnail in returnToOriginal) and is based on the older version of materialize repo.

I used that version to create one that actually works. I added data-external as the attribute for img with url to the full-size image. As in the PR above, it uses progress bar while loading full-sized image.

Also I fixed a bug, where data-caption was checked against !== "" (old line 113) so when it is not set at all (i.e. undefined) it was created anyway and moved it's hiding complete event code regarding origin img to origin complete event function (new lines 265-296 are moved from old 246-273).

Click event was moved to new function enlargeImage and now click checks if the image has external source (in which casse loads it in place of thumbnail) or just launches enlargeImage and works as it used to previously.

I added example section called External image source into documentation after Caption section on JavaScript -> Media page.

Hope someone will find it useful.

Known issues (maybe someone can help with these):

  • preferably image should do some fadeOut/In animation when returnToOriginal (and maybe while enlarging)
  • related to the one above - when image is loaded for a short moment img element is being resized, but then size is changed to thumbnail and animation starts. Maybe there's a way to load image in the element of contant size.

I think it is a good start to this feature. If you can help with the issues above, please contribute.

Janusz Kamieński Added data-external for external source of materialboxed image showed…
… with overlay; Also added example to documentation
+ // if thumbnail has original version of image
+ progressWrapper.insertAfter(origin); // show progress while new src loads
+ origin.load(function(){ // will enlarge image once new src is loaded
+ enlargeImage(); // enlarge loaded src as normal
ivellios Jan 11, 2017 edited

Before enlargeImage() should be also added:

            originalWidth = origin.width();
            originalHeight = origin.height();
              width: originalSrcWidth,
              height: originalSrcHeight

So the loaded image will be resized right after loading to the thumbnail size and the resized to full size with overlay. Makes animation look little bit more smooth. Still placeholder changes it's size for a moment. I still think about a workaround.

Janusz Kamie... added some commits Jan 11, 2017

@acburst @Dogfalo Please look into it and do the needful

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment