GiovanniSalmeri/yellow-figure

[Feature Request] Lightbox

Closed this issue · 2 comments

pftnhr commented

Hello Giovanni,

have you ever thought about adding a lightbox feature to the extension? The only extension that offers this is yellow-gallery but I don't like the implementation of the captions (writing them into the yellow-languages.ini). However, I'd love to have a lightbox for my images because I am creating a rather narrow website and will probably include screenshots there more often.

pftnhr commented

Hi Giovanni,

I have included fslightbox with this JavaScript:

/* Adding links to .entry-full imgSources */
document.querySelectorAll('figure img').forEach($imgSource => {
  //get source from img
  var src = $imgSource.getAttribute('src')
  
  //create an anchor
  var $lbAnchor = document.createElement('a')
  $lbAnchor.setAttribute('data-fslightbox', '')
  $lbAnchor.className = 'lightbox
  $lbAnchor.href = src

  //wrap img with link
  $imgSource.parentNode.replaceChild($lbAnchor, $imgSource);
  $lbAnchor.appendChild($imgSource);
})

and it works very well.

GiovanniSalmeri commented

Hello! You have been faster in finding a solution than I in thinking about it! 😄 Thank you very much for sharing your solution. Since I like very much to reinvent the wheel 😊 I do not exclude that sooner or later I will return to this and try to write a code lighter than fslightbox, anyway I will keep you informed.

  • 🚀1