A part of camera image on site

[Erwin van der Zwart]

Hi,

I have used this before:

Give your camera container the custom class 'cam' and make shore to check the box 'always open'

Custom css:

Code:

@-webkit-keyframes Zoom-In /* Safari and Chrome */
{
0%   {opacity:0.5;}
100% {opacity: 1;  width: 100% !important; height: 100% !important;}
 
}

.camzoomin{
 -webkit-animation: Zoom-In 1s !important; /* Safari and Chrome */
 transform-origin: top left;
 position: absolute;
 left: 0px !important;
 top: 0px !important;
 height: 100% !important;
 width: 100% !important;
 max-height: 100% !important;
 max-width: 100% !important;
 overflow: hidden;
 z-index: 100!important;
}

.cam > img {
 border-radius: 10px;
 border-color: #333;
 border-width: 2px;
 border-style: solid;
}

.camzoomin > img {
 position:absolute !important;
 top: 5% !important;
 left: 5% !important;
 width: 90% !important;
 height: 90% !important;
 border-radius: 20px !important;
}

and custom Javascript:

Code:

$(function(){
 
 $(document).ready(function () {

    $('.cam').on('vclick', function( e ) {
       if ($(this).hasClass('camzoomin')){
         $(this).removeClass('camzoomin');
       } else {
         $(this).addClass('camzoomin');
         $(this).find("img").attr('src', $(this).find("img").attr('src') + '?' + Math.random() );
       }
    });
   
 });
 
});

BR,

Erwin