search

biati-digital / glightbox

Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
MIT License
2.04k stars 228 forks source link

Use svg instead of png for closing button #37

Closed obendev closed 5 years ago

obendev commented 5 years ago

Hey! Instead of the background png on .glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev you could use a svg. Example:

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 320 512">
  <path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/>
</svg>

(You have to adjust the size on the viewBox) Want to use it as a background-image? No problem! https://websemantics.uk/tools/svg-to-background-image-conversion/

Great lightbox, never have seen a better one before, especially with vanilla JS, keep up the good work!

biati-digital commented 5 years ago

Hi @obendev, i'm really glad you like GLightbox.

About the svg, i'll definitely give it a go as soon as i have some free time.

obendev commented 5 years ago

Sounds great. Make sure to add a fill color on the path before you convert it, at least in case you want to include it as a background image. 😇

biati-digital commented 5 years ago

All icons are now SVG :)