search

demtario / hes-gallery

Light, dependency free, responsive gallery script
https://demtario.github.io/hes-gallery/demo/
MIT License
30 stars 2 forks source link

feat(compatibility): data-src attribute support #12

Closed Kristinita closed 3 years ago

Kristinita commented 4 years ago

1. Summary

I made hes-gallery support cases where the required path to image is the value of the data-src attribute.

2. MCVE

<!-- [INFO] Path to the hes-gallery.min.js in “KiraFixAccesisibility” branch of my fork:
https://github.com/Kristinita/hes-gallery/blob/KiraFixAccessibility/dist/hes-gallery.min.js

[INFO] I use raw.githack.com as CDN:
https://raw.githack.com/
-->
<script src="https://rawcdn.githack.com/Kristinita/hes-gallery/30e957787fbee7a08d7b872961c864c66f46bdb4/dist/hes-gallery.min.js"></script>

<!-- [INFO] If 3 attributes “data-fullsize”, “data-src” and “src” exists,
“data-fullsize” has a higher priority
-->
<div class="hes-gallery"><img alt="Alternative text" class="SashaLazy" data-fullsize="https://64.media.tumblr.com/784fb357523d75590261ba6c5c19e6e7/tumblr_o8punbn6Qo1st5lhmo1_1280.jpg" data-src="https://64.media.tumblr.com/01f9f4d03fb2921d20baed3e169d7291/tumblr_o8h4ukyvev1st5lhmo1_1280.jpg" src="https://64.media.tumblr.com/f6e5e17b6eae1b298a52050da8e270d3/tumblr_o8pulnWs9r1st5lhmo1_1280.jpg"></div>

<!-- [INFO] “data-src” has a higher priority than “src” -->
<div class="hes-gallery"><img alt="Alternative text" class="SashaLazy" data-src="https://64.media.tumblr.com/f5cc1b61d79d75e7afe38a6dfe012cd6/tumblr_o8puh6OTYy1st5lhmo1_1280.jpg" src="https://64.media.tumblr.com/784fb357523d75590261ba6c5c19e6e7/tumblr_o8punbn6Qo1st5lhmo1_1280.jpg"></div>

<!-- [INFO] If no “data-fullsize” and/or “data-src”, hes-gallery get a value from a “src” attribute -->
<div class="hes-gallery"><img alt="Alternative text" class="SashaLazy" src="https://64.media.tumblr.com/e5627fd8eca6efa0bf9a8c9efbf99edc/tumblr_o8puvwC3oQ1st5lhmo1_1280.jpg"></div>

I couldn’t find any regressions after my pull request.

3. Argumentation

We must specify the path to the image in the data-src attribute, not the src if we use the following plugins:

  1. Slick — 26,2 thousands GitHub stars at the time of this writing
  2. Swiper — 25,1
  3. lazysizes — 14,3
  4. lazyload — 5,8
  5. jQuery Lazy — 948

After my changes it would be possible to use hes-gallery together with these plugins.

See details about data-src in my issue to the official HTML Standard repository.

4. Environment

4.1. Minification

I minified hes-gallery.js and on the UglifyES online service, version 3.3.9.

4.2. Testing

  1. Windows 10.0.19041.508 Pro N for Workstations 64-bit EN

  2. Browsers:

    1. Firefox 82.0.1 (64-bit)
    2. Chromium 85.0.4183.102 (Official Build) (64-bit)

Thanks.

demtario commented 4 years ago

Hi, thanks for your contribution

Great, if this is required to use with provided plugins, then this may be merged.

I have one small issue about code format, which I commented in the code.

I also see, that in this pull there are changes from the other one, and this shouldn't happen.

Please fix those issues, and I'll merge this.

demtario commented 3 years ago

Due to unresolved comments, I am closing this Pull Request

However, I solved the issue mentioned in it myself (https://github.com/demtario/hes-gallery/commit/83f36ba5ec910ff8dc0b80691b0c4fb7ec1649df) and since version 1.5.0 this should work