### Initialize VenoBox with Default Selector Source: https://veno.es/venobox Initialize VenoBox using its default selector ('.venobox') for minimal setup. ```javascript new VenoBox(); ``` -------------------------------- ### Callbacks Source: https://veno.es/venobox Provides examples of VenoBox callback functions that can be used to hook into various stages of the plugin's lifecycle, such as initialization, opening, closing, and navigation. ```APIDOC ## Callbacks ```javascript var vboxOptions = { selector: '.my-link', // is called after plugin initialization. onInit: function(plugin){ console.log('INIT'); console.log(plugin); }, // is called before the venobox pops up, return false to prevent opening; onPreOpen: function(obj){ console.log('PRE OPEN'); console.log(obj); }, // is called when opening is finished onPostOpen: function(obj, gallIndex, thenext, theprev){ console.log('POST OPEN'); console.log('current gallery index: ' + gallIndex); console.log(thenext); console.log(theprev); }, // is called before closing, return false to prevent closing onPreClose: function(obj, gallIndex, thenext, theprev){ console.log('PRE CLOSE'); console.log('current gallery index: ' + gallIndex); console.log(thenext); console.log(theprev); }, // is called after gallery navigation step onNavComplete: function(obj, gallIndex, thenext, theprev){ console.log('POST NAV'); console.log('current gallery index: ' + gallIndex); console.log(thenext); console.log(theprev); }, // is called after new content loaded onContentLoaded: function(newcontent){ console.log('NEW CONTENT'); console.log(newcontent); }, } new VenoBox(vboxOptions); ``` ``` -------------------------------- ### Enable Autoplay for Videos with data-autoplay Source: https://veno.es/venobox Set `data-autoplay="true"` on video links to automatically start playback when the video opens. Alternatively, set the `autoplay` option to `true` globally. ```html Vimeo Youtube MP4 ``` ```javascript new VenoBox({ selector: '.my-video-links', }); ``` -------------------------------- ### Control VenoBox Instance with Methods Source: https://veno.es/venobox Initialize VenoBox and use its methods to programmatically close the modal, navigate through the gallery, or open a specific item. ```javascript // Initialize venobox as a variable var venobox = new VenoBox(); venobox.close(); // Close the modal window venobox.next(); // Navigate the next gallery item venobox.prev(); // Navigate the previous gallery item // Open specific item var myLink = document.querySelector('#my-link'); venobox.open(myLink); ``` -------------------------------- ### Initialize Image Gallery with VenoBox Source: https://veno.es/venobox Configure VenoBox for an image gallery with numeration, infinite gall, and sharing options. The 'spinner' option customizes the loading indicator. ```html ``` ```javascript new VenoBox({ selector: '.my-image-links', numeration: true, infinigall: true, share: true, spinner: 'rotating-plane' }); ``` -------------------------------- ### Plugin Methods Source: https://veno.es/venobox Shows how to programmatically control VenoBox instances by calling methods like `open`, `close`, `next`, and `prev`. ```APIDOC ## Methods call **open** , **close** , **next** or **prev** item outside the plugin ```javascript // Initialize venobox as a variable var venobox = new VenoBox(); venobox.close(); // Close the modal window venobox.next(); // Navigate the next gallery item venobox.prev(); // Navigate the previous gallery item // Open specific item var myLink = document.querySelector('#my-link'); venobox.open(myLink); ``` ``` -------------------------------- ### Initialize Custom Content with VenoBox Source: https://veno.es/venobox Configure VenoBox for custom content types like iframes, AJAX requests, and inline HTML. 'data-vbtype' specifies the content type, and 'data-maxwidth' limits the display size. ```html Gmaps iFrame Ajax Inline ``` ```javascript new VenoBox({ selector: '.my-custom-links', }); ``` -------------------------------- ### Initialize VenoBox with jQuery Source: https://veno.es/venobox If jQuery is present, VenoBox can be initialized using jQuery's plugin system. ```javascript $('.venobox').venobox() ``` -------------------------------- ### Include VenoBox CSS Source: https://veno.es/venobox Link the VenoBox CSS file in the HTML head for styling. ```html ``` -------------------------------- ### Initialize VenoBox with Custom Selector Source: https://veno.es/venobox Initialize VenoBox to target elements with a specific class, such as '.my-link'. ```javascript new VenoBox({ selector: ".my-link" }); ``` -------------------------------- ### Set Title with title Attribute Source: https://veno.es/venobox Provide an optional description for the VenoBox content using the standard `title` attribute. ```html ... ... ``` -------------------------------- ### Specify Content Type with data-vbtype Source: https://veno.es/venobox Use `data-vbtype` to define the type of content (iframe, inline, ajax, video). This is required for non-image content. ```html Open Iframe Open inline content Retrieve data via Ajax YouYbe ``` -------------------------------- ### Activate Gallery Navigation with data-gall Source: https://veno.es/venobox Assign the same `data-gall` attribute to links to enable navigation between different content types within a gallery. ```html ``` -------------------------------- ### Include VenoBox JavaScript Source: https://veno.es/venobox Include the VenoBox JavaScript file near the end of your HTML body. ```javascript ``` -------------------------------- ### Add Links for VenoBox Source: https://veno.es/venobox Create anchor tags with the 'venobox' class or custom classes for VenoBox to target. Supports images and iframes. ```html image alt open iFrame ``` -------------------------------- ### Custom Class Integration Source: https://veno.es/venobox Demonstrates how to override the global `customClass` option for individual links using the `data-customclass` attribute. ```APIDOC ## Custom Class `data-customclass` overrides the global option `customClass` ```html Open image ``` ``` -------------------------------- ### Set Aspect Ratio for iFrames and Videos Source: https://veno.es/venobox Control the aspect ratio of iFrames and videos using the `data-ratio` attribute. Available values include '1x1', '4x3', '16x9', '21x9', and 'full'. The default is '16x9'. ```html Open Iframe Video ``` -------------------------------- ### Set Maximum Width with data-maxwidth Source: https://veno.es/venobox Override the global `maxWidth` option by specifying a custom maximum width using `data-maxwidth`. Accepts standard CSS length units. ```html Open image ``` -------------------------------- ### Apply Custom Class with Data Attribute Source: https://veno.es/venobox Use the 'data-customclass' attribute on a link to override the global 'customClass' option for that specific instance. ```html Open image ``` -------------------------------- ### Use Custom Data Attribute for Title Source: https://veno.es/venobox Apply a custom data attribute (e.g., `data-title`) to links to specify descriptions when `titleattr` is configured in VenoBox. ```html ``` ```html ``` -------------------------------- ### Set Title with Custom Data Attribute Source: https://veno.es/venobox Configure VenoBox to use a custom data attribute (e.g., `data-title`) for descriptions by setting the `titleattr` option during initialization. ```javascript new VenoBox({ titleattr: 'data-title' }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.