Cincopa embed code can be easily integrated to any project.
To start using embed code in vue project must be included runtime library to the project and then call cincopa.boot_gallery method
cincopa.boot_gallery accept 3 params
/** * * @param {object} loadObject - { * "_object": "ID of the Element where to append or HTML DOM Element" ( required ) * "_fid": "Gallery FID" ( required ) * "_editor": "Editor Object" (optional) * } * */ cincopa.boot_gallery = function(loadObject){ .......... }
Here is example of vue component where used cincopa.boot_gallery method.
<template> <div ref="embedRef" class="galleryDemo cincopa-fadein" ></div> </template> <script> import { ref, onMounted } from 'vue'; export default { props: ['rid'], setup(props) { const embedRef = ref(null); function renderEmbedCode(activeEditor) { /* rid of assets can be passed as a prop to the component */ cincopa.boot_gallery({ _object: embedRef.value, _fid: 'A4HAcLOLOO68!' + props.rid }); } onMounted(() => { renderEmbedCode(); }); window.cincopa.registeredFunctions.push({ func: function (name, data, gallery) { switch (name) { case 'runtime.on-args': /* change gallery args*/ gallery.args.iframe = false; break; case 'skin.load': /* do something when skin loaded */ break; case 'video.load': p/* do something on video lokad */ break; }, filter: '*', }); return { embedRef, }; }, }; </script>
Inline Editor
To the cincopa.boot_gallery can be passed also 3rd param with editor object and it will activate inline video editor.
To learn more about Inline Editor functionality you can check this article