Manual Markup

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>