banthagroup / fslightbox

An easy to use vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.
MIT License
351 stars 30 forks source link

Custom attributes cannot be set in custom sources #184

Open loltag22 opened 2 years ago

loltag22 commented 2 years ago

It could be useful to add src to iframe only when it is opened inside fslighbox. If you have a big gallery, iframes willl load instantly and this is not a good thing. Here's an example:

<a  
     data-fslightbox="lightbox" 
     data-foo="foo" 
     data-src="https://player.vimeo.com/video/22439234" 
     data-class="fslightbox-source"  
     href="#test"
>
     Image
</a>
<iframe 
     id="test"   
     frameBorder="0" 
     allow="autoplay; fullscreen" 
     allowFullScreen
> 
</iframe>

This code sets only data-class attribute to iframe and nothing else.

Thank you in advance.

adriandmitroca commented 2 years ago

It works like this:

sources={[
  <div
    style={{
      position: "relative",
      height: "0",
      width: "calc(100vw - 30px)",
      paddingTop: "56.25%",
    }}
  >
    <iframe
      style={{
        position: "absolute",
        top: "0",
        left: "0",
        width: "100%",
        height: "100%",
      }}
      src={url}
      title={title}
      frameborder="0"
      allowfullscreen
      allow="fullscreen; accelerometer; gyroscope; magnetometer; vr; xr; xr-spatial-tracking; autoplay; camera; microphone"
    ></iframe>
  </div>,
]}
/>