{"id":1829,"date":"2016-07-08T03:16:01","date_gmt":"2016-07-08T03:16:01","guid":{"rendered":"http:\/\/themes.wpbeaches.com\/venobox\/?page_id=1829"},"modified":"2016-07-08T03:41:23","modified_gmt":"2016-07-08T03:41:23","slug":"manual-markup","status":"publish","type":"page","link":"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/","title":{"rendered":"Manual Markup"},"content":{"rendered":"

Below are manual instructions for using the VenoBox Lightbox for your code.<\/p>\n

Typically for the lightbox to work you wrap a link around a text or image element.<\/p>\n

<a class=\"venobox\" data-type=\"vimeo\" href=\"https:\/\/vimeo.com\/1084537\"><img src=\"...\" \/><\/a><\/pre>\n
When clicked the lightbox will execute showing the linked content.<\/p>\n
To use Venobox<\/strong> you need to ensure the CSS class\u00a0class=\"venobox\"\u00a0<\/code>is used in the link mark up and also if the lightbox content is not an image the\u00a0data-type<\/code> attribute is also required\u00a0data-type=\"vimeo\"\u00a0<\/code>or other Data Type, see below under Data Types.<\/p>\n
Data Types<\/h4>\n
If the content is not an image you have to specify its type via data attribute data-type<\/code><\/p>\n
Available data-type values: youtube<\/code> vimeo<\/code> iframe<\/code> inline<\/code> ajax<\/code><\/p>\n
<a class=\"venobox\" data-type=\"iframe\" href=\"http:\/\/www.veno.es\">Open Iframe<\/a>\r\n<a class=\"venobox\" data-type=\"inline\" title=\"My Description\" href=\"#inline\">Open inline content<\/a>\r\n<a class=\"venobox\" data-type=\"ajax\" href=\"ajax-call.php\">Retrieve data via Ajax<\/a>\r\n<a class=\"venobox\" data-type=\"youtube\" href=\"http:\/\/youtu.be\/d85gkOXeXG4\">YouTube<\/a>\r\n<a class=\"venobox\" data-type=\"vimeo\" href=\"http:\/\/vimeo.com\/75976293\">Vimeo<\/a>\r\n<\/pre>\n
Title Attribute<\/h4>\n
Optional: set title<\/code> attribute to show a description, it will appear at the top of the lightbox.<\/p>\n
<a class=\"venobox\" title=\"Here is your description\" href=\"...\r\n<\/pre>\n
Auto Play<\/h4>\n
Use data-autoplay=\"true\"<\/code> to automatically start Vimeo and YouTube videos once the text or image link is clicked<\/p>\n
<a class=\"venobox\" data-autoplay=\"true\" data-type=\"vimeo\" href=\"...\r\n<a class=\"venobox\" data-autoplay=\"true\" data-type=\"youtube\" href=\"...\r\n<\/pre>\n
Overlay colors<\/h4>\n
Examples:<\/strong>
\nColor 1<\/a> Color 2<\/a> Color 3<\/a> Color 4<\/a><\/p>\n
Just add a data-overlay\u00a0<\/code>attribute value to your links for colored backgrounds<\/p>\n
<a class=\"venobox\" data-overlay=\"rgba(95,164,255,0.8)\" href=\"...\">...<\/a>\r\n<a class=\"venobox\" data-overlay=\"#ca294b\" href=\"...\">...<\/a>\r\n<\/pre>\n
Gallery<\/h4>\n
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<\/code> to each link, like the example below, you can see this in the colors example above.<\/p>\n
<a class=\"venobox\" data-gall=\"myGallery\" href=\"image01-big.jpg\"><img src=\"image01-small.jpg\" \/><\/a>\r\n<a class=\"venobox\" data-gall=\"myGallery\" href=\"image02-big.jpg\"><img src=\"image02-small.jpg\" \/><\/a>\r\n<a class=\"venobox\" data-gall=\"myGallery\" href=\"image03-big.jpg\"><img src=\"image03-small.jpg\" \/><\/a><\/pre>\n
\n
\n
Custom<\/h1>\n
set different custom overlay colors for each link<\/p>\n<\/div>\n<\/div>\n
\n
\n
Background<\/h1>\n
set different custom overlay colors for each link<\/p>\n<\/div>\n<\/div>\n
\n
\n
Colors<\/h1>\n
set different custom overlay colors for each link<\/p>\n<\/div>\n<\/div>\n
\n
\n
RGBA or FULL<\/h1>\n
set different custom overlay colors for each link<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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\u00a0class=”venobox”\u00a0is used … Continue reading Manual Markup<\/span><\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-1829","page","type-page","status-publish","hentry"],"yoast_head":"\nManual Markup - VenoBox LightBox<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Manual Markup - VenoBox LightBox\" \/>\n<meta property=\"og:description\" content=\"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\u00a0class="venobox"\u00a0is used … Continue reading Manual Markup\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/\" \/>\n<meta property=\"og:site_name\" content=\"VenoBox LightBox\" \/>\n<meta property=\"article:modified_time\" content=\"2016-07-08T03:41:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/\",\"url\":\"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/\",\"name\":\"Manual Markup - VenoBox LightBox\",\"isPartOf\":{\"@id\":\"https:\/\/themes.wpbeaches.com\/venobox\/#website\"},\"datePublished\":\"2016-07-08T03:16:01+00:00\",\"dateModified\":\"2016-07-08T03:41:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/themes.wpbeaches.com\/venobox\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Manual Markup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/themes.wpbeaches.com\/venobox\/#website\",\"url\":\"https:\/\/themes.wpbeaches.com\/venobox\/\",\"name\":\"VenoBox LightBox\",\"description\":\"Just another responsive WordPress jQuery lightbox plugin\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/themes.wpbeaches.com\/venobox\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Manual Markup - VenoBox LightBox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/","og_locale":"en_US","og_type":"article","og_title":"Manual Markup - VenoBox LightBox","og_description":"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\u00a0class=\"venobox\"\u00a0is used … Continue reading Manual Markup","og_url":"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/","og_site_name":"VenoBox LightBox","article_modified_time":"2016-07-08T03:41:23+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/","url":"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/","name":"Manual Markup - VenoBox LightBox","isPartOf":{"@id":"https:\/\/themes.wpbeaches.com\/venobox\/#website"},"datePublished":"2016-07-08T03:16:01+00:00","dateModified":"2016-07-08T03:41:23+00:00","breadcrumb":{"@id":"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/themes.wpbeaches.com\/venobox\/manual-markup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/themes.wpbeaches.com\/venobox\/"},{"@type":"ListItem","position":2,"name":"Manual Markup"}]},{"@type":"WebSite","@id":"https:\/\/themes.wpbeaches.com\/venobox\/#website","url":"https:\/\/themes.wpbeaches.com\/venobox\/","name":"VenoBox LightBox","description":"Just another responsive WordPress jQuery lightbox plugin","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themes.wpbeaches.com\/venobox\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P7HFXn-tv","_links":{"self":[{"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/pages\/1829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/comments?post=1829"}],"version-history":[{"count":9,"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/pages\/1829\/revisions"}],"predecessor-version":[{"id":1839,"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/pages\/1829\/revisions\/1839"}],"wp:attachment":[{"href":"https:\/\/themes.wpbeaches.com\/venobox\/wp-json\/wp\/v2\/media?parent=1829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}