How to Add a Fullscreen Button to a Cincopa Gallery

Adding a fullscreen button to a Cincopa gallery allows users to expand the media content for an immersive experience. This guide explains how to implement a fullscreen button using JavaScript and Cincopa's runtime events.

Steps to Add a Fullscreen Button

To add a fullscreen button, follow these steps:

1. Include the Required JavaScript

<script type="text/javascript">
    var cincopa = cincopa || {};
    cincopa.registeredFunctions = cincopa.registeredFunctions || [];

    cincopa.registeredFunctions.push({
        func: function (name, data, gallery) {
            let galleryContainer;
            galleryContainer = getElement(gallery.loaderParams._object);

            /*  add button only on parent window and not inside iframe if iframe mode is enabled */
            if(document.querySelector('.cp-fullscreen-btn')){
              return;
            }
            let fullscreenBtn = document.createElement('div');
            let enterFullscreenIcon = '<svg class="bi bi-fullscreen" fill="#000000" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"></path></svg>';
            let exitFullscreenIcon = '<svg class="bi bi-fullscreen-exit" fill="#000000" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"></path></svg>';
            fullscreenBtn.className = 'cp-fullscreen-btn'
            fullscreenBtn.innerHTML = enterFullscreenIcon;
            fullscreenBtn.onclick = function () {
                if(isFullscreen()){
                    this.innerHTML = enterFullscreenIcon;
                    exitFullscreen();
                    galleryContainer.classList.remove('cp-gallery-fullscreen');
                }else{
                    this.innerHTML = exitFullscreenIcon;
                    enterFullscreen(galleryContainer);
                    galleryContainer.classList.add('cp-gallery-fullscreen');
                }
                
            }
            galleryContainer.append(fullscreenBtn);
        }, filter: "runtime.on-html-loaded"
    });

    function isFullscreen() {
        return document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement;
    }

    function enterFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }

    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
</script>

2. Add Styling for the Fullscreen Button

.cp-fullscreen-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 30px;
    top: 30px;
    background: rgba(0, 0, 0, 0.6);
    padding: 13px;
    border-radius: 10px;
    cursor: pointer;
    z-index: 999;
}    
.cp-fullscreen-btn svg {
    fill: #fff;
}

demo

Summary

Includes a fullscreen button in the gallery.
Works by modifying the gallery’s container dynamically.
Supports fullscreen toggling via browser APIs.
Customizable styling and placement.

By following these steps, you can successfully add a fullscreen button to a Cincopa gallery, improving the user experience for media content.