… 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.
Hope someone will find it useful.
Known issues (maybe someone can help with these):
I think it is a good start to this feature. If you can help with the issues above, please contribute.
Added data-external for external source of materialboxed image showed…
… with overlay; Also added example to documentation
Before enlargeImage() should be also added:
originalWidth = origin.width();
originalHeight = origin.height();
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.
Now image placeholder and image before enlargement is having thumbnai…
…l size. No more repositioning.
Fixed broken placeholder size without external url
@acburst @Dogfalo Please look into it and do the needful