<div class="u-margin-bottom c-lightbox js-lightbox">
<a title="Image" href="https://source.unsplash.com/random/400x300" class="b-link u-block c-lightbox-link js-lightbox-link">Image</a>
<a title="Image 2" href="https://source.unsplash.com/random/400x300" class="b-link u-block c-lightbox-link js-lightbox-link">Image 2</a>
<a title="Image 3" href="https://source.unsplash.com/random/400x300" class="b-link u-block c-lightbox-link js-lightbox-link">Image 3</a>
</div>
<div class="c-lightbox js-lightbox">
<a title="HTML5 Video" data-mp4="http://techslides.com/demos/sample-videos/small.mp4" data-webm="http://techslides.com/demos/sample-videos/small.webm" data-ogg="Sample Ogg Video File" class="b-link u-block c-lightbox-link js-lightbox-link js-lightbox-link--video">HTML5 Video</a>
<a title="Iframe" href="<iframe src='https://source.unsplash.com/random/400x300' frameborder='0' height='300' width='400'></iframe>" class="b-link u-block c-lightbox-link js-lightbox-link js-lightbox-link--iframe">Iframe</a>
<a title="Youtube/Vimeo" href="https://www.youtube.com/embed/qtQgbdmIO30?autoplay=true" class="b-link u-block c-lightbox-link js-lightbox-link js-lightbox-link--hostedvideo">Youtube/Vimeo</a>
</div>
<div class="u-margin-bottom c-lightbox js-lightbox">
<a title="Image" href="https://source.unsplash.com/random/400x300" class="b-link u-block c-lightbox-link js-lightbox-link">Image</a>
<a title="Image 2" href="https://source.unsplash.com/random/400x300" class="b-link u-block c-lightbox-link js-lightbox-link">Image 2</a>
<a title="Image 3" href="https://source.unsplash.com/random/400x300" class="b-link u-block c-lightbox-link js-lightbox-link">Image 3</a>
</div>
<div class="c-lightbox js-lightbox">
<a title="HTML5 Video" data-mp4="http://techslides.com/demos/sample-videos/small.mp4" data-webm="http://techslides.com/demos/sample-videos/small.webm" data-ogg="Sample Ogg Video File" class="b-link u-block c-lightbox-link js-lightbox-link js-lightbox-link--video">HTML5 Video</a>
<a title="Iframe" href="<iframe src='https://source.unsplash.com/random/400x300' frameborder='0' height='300' width='400'></iframe>" class="b-link u-block c-lightbox-link js-lightbox-link js-lightbox-link--iframe">Iframe</a>
<a title="Youtube/Vimeo" href="https://www.youtube.com/embed/qtQgbdmIO30?autoplay=true" class="b-link u-block c-lightbox-link js-lightbox-link js-lightbox-link--hostedvideo">Youtube/Vimeo</a>
</div>
/* No context defined for this component. */
This component is a simple lightbox, using the external library simple lightbox.
To use this lightbox, you will need to use the .js-lightbox wrapper around your links as this is what will initialise everything, the on each link use the classes js-lightbox-link, .js-lightbox-link--video, .js-lightbox-link--iframe, .js-lightbox-link--hostedvideo for different kinds of lightbox content.
The simpliest use for the lightbox would be an image gallery. To get this work, simply wrap the links in a .js-lightbox wrapper, then each link uses the simple class of .js-lightbox-link and a href to the appropriate image you wish to use.
NOTE: you can also use here the .js-lightbox-link--hostedvideo class, with a reference to the embed code of youtube or vimeo videos
Iframes cannot be included within an image gallery as it will break the scrolling of the gallery.
These links are much like above, however you have to add the .js-lightbox-link--iframe class, then add the iframe code to the href attribute.
Videos, like iframe links, cannot be included in the gallery as they will break the scrolling of the gallery. This is used to have a HTML5 video in the lightbox.
These links are much like above, however you have to add the .js-lightbox-link--video class.
Instead of using a href attribute, you need to use data-mp4, data-webm and data-ogg attributes to include the urls of the videos you want to use based on the main three best supported HTML5 video formats. You do not need to use all three attributes, but you will need to use at least one.
Currently the styles being used are the default ones from the plugin. .c-lightbox classes have been added to the element, but no overrides have been implemented to allow for speed of changes on new builds.