Embed cincopa gallery in vue project
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>