HADasboard hack to fullscreen images on click

fullcode.js

     $(function() {
        var lastParent = null, imgHackTimer = null;
        var onImgClickHack = function(evnt){
          // if(evnt) console.log(evnt.target.src);
          if (lastParent) {
            $('#fullImgHack').fadeOut('fast', function() {
             $('#fullImgHack').children().appendTo(lastParent);
             $('#fullImgHack').css('z-index', '0');
             lastParent = null;
             });
            if (imgHackTimer) { clearTimeout(imgHackTimer); imgHackTimer = null;}
          } else {
            lastParent = $(evnt.target).parents().eq(1);
            $(evnt.target).parent().siblings('h1').appendTo($('#fullImgHack'));
            $(evnt.target).parent().prependTo($('#fullImgHack'));               
            $('#fullImgHack').css('z-index', '10').fadeIn('fast');
            if (ihRetainTimeout > 0)
              imgHackTimer = setTimeout(onImgClickHack, ihRetainTimeout * 1000);
          }
        };
        // hide iframe element which overlaps img due z-index +1
        if (ihIdKeywords.length > 0)  {
          $( ihIdKeywords.map(item => '[id*='+item+'] .outer-frame.iframe').join(', ') ).hide();
        } else { $('img').parent().prev('.outer-frame.iframe').hide(); }
        // crate nice hidden absulute div which has same dimensions as <ul> and put it inside gridster
        $('<div id="fullImgHack" class=""></div>')
              .attr('style', $('.gridster ul').attr('style'))
              .css({'z-index': 1, 'position':'absolute', 'overflow': 'hidden'})
              .hide()
              .prependTo($('.gridster'));
        // hook on click to selected images
        $(ihIdKeywords.length > 0 ?  ihIdKeywords.map(item => '[id*='+item+'] .img-frame').join(', ') : '.img-frame').click(onImgClickHack);
     });

variables.yaml

head_includes:
 - <! head tags go here ->
 - |
      <style>
         #fullImgHack .title {position: absolute; bottom: 0px; margin: 0px 0px 0px 0px; width: 100%; font-size: 120%;}
         #fullImgHack .outer-image {width: 100%; height: 100%;}
         /* use 'max-height' instead of 'height' to prevent smaller images to stretch */
         #fullImgHack .img-frame {height: 100%; display: block; margin: auto;}
      </style>

#
# Custom body includes - should be a YAML List, e.g.:
#
#body_includes:
#  - some include
#  - some other include
#
# Text will be included verbatim in the body section of the doc, use it for JavaScript
#
# It is your responsibility to ensure the HTML is correct
#

body_includes:
 - <! body tags go here ->
 - |
      <script>
        /**
        * ** Fullscreen on img click hack - good for fullview cameras **
        */

       var
       // set timeout in sec to auto hide fullscreen mode, 0 to stay untill you click again
        ihRetainTimeout = 30,
       // based on widget name (be carefull as non alfa letters are replaced with '-'; leave empty [] for all images with 'img-frame' class
        ihIdKeywords = ['cam', 'radar'];

       $(function(){var b=null,imgHackTimer=null;var c=function(a){if(b){$('#fullImgHack').fadeOut('fast',function(){$('#fullImgHack').children().appendTo(b);$('#fullImgHack').css('z-index','0');b=null});if(imgHackTimer){clearTimeout(imgHackTimer);imgHackTimer=null}}else{b=$(a.target).parents().eq(1);$(a.target).parent().siblings('h1').appendTo($('#fullImgHack'));$(a.target).parent().prependTo($('#fullImgHack'));$('#fullImgHack').css('z-index','10').fadeIn('fast');if(ihRetainTimeout>0)imgHackTimer=setTimeout(c,ihRetainTimeout*1000)}};if(ihIdKeywords.length>0){$(ihIdKeywords.map(item=>'[id*='+item+'] .outer-frame.iframe').join(', ')).hide()}else{$('img').parent().prev('.outer-frame.iframe').hide()}$('<div id="fullImgHack" class=""></div>').attr('style',$('.gridster ul').attr('style')).css({'z-index':1,'position':'absolute','overflow':'hidden'}).hide().prependTo($('.gridster'));$(ihIdKeywords.length>0?ihIdKeywords.map(item=>'[id*='+item+'] .img-frame').join(', '):'.img-frame').click(c)});
      </script>

Worked great, just what I was looking for. Thanks!

fullcode.js is just the source code, no required to place it in appdaemon skin as code is compressed (single line #37) inside variable.yaml