Below are manual instructions for using the VenoBox Lightbox for your code.
Typically for the lightbox to work you wrap a link around a text or image element.
<a class="venobox" data-type="vimeo" href="https://vimeo.com/1084537"><img src="..." /></a>
When clicked the lightbox will execute showing the linked content.
To use Venobox you need to ensure the CSS class class="venobox"
is used in the link mark up and also if the lightbox content is not an image the data-type
attribute is also required data-type="vimeo"
or other Data Type, see below under Data Types.
Data Types
If the content is not an image you have to specify its type via data attribute data-type
Available data-type values: youtube
vimeo
iframe
inline
ajax
<a class="venobox" data-type="iframe" href="http://www.veno.es">Open Iframe</a> <a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a> <a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a> <a class="venobox" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">YouTube</a> <a class="venobox" data-type="vimeo" href="http://vimeo.com/75976293">Vimeo</a>
Title Attribute
Optional: set title
attribute to show a description, it will appear at the top of the lightbox.
<a class="venobox" title="Here is your description" href="...
Auto Play
Use data-autoplay="true"
to automatically start Vimeo and YouTube videos once the text or image link is clicked
<a class="venobox" data-autoplay="true" data-type="vimeo" href="... <a class="venobox" data-autoplay="true" data-type="youtube" href="...
Overlay colors
Examples:
Color 1 Color 2 Color 3 Color 4
Just add a data-overlay
attribute value to your links for colored backgrounds
<a class="venobox" data-overlay="rgba(95,164,255,0.8)" href="...">...</a> <a class="venobox" data-overlay="#ca294b" href="...">...</a>
Gallery
To activate navigation previous and next icons whilst in lighbox mode between multiple types of content on the same page, assign the same data attribute data-gall
to each link, like the example below, you can see this in the colors example above.
<a class="venobox" data-gall="myGallery" href="image01-big.jpg"><img src="image01-small.jpg" /></a> <a class="venobox" data-gall="myGallery" href="image02-big.jpg"><img src="image02-small.jpg" /></a> <a class="venobox" data-gall="myGallery" href="image03-big.jpg"><img src="image03-small.jpg" /></a>