Public dialog to show files

Viewer extension (core_viewer.js)

Viewer is for elements, containing attributes data-viewer and data-viewer-group-by (see /bitrix/js/ui/viewer.js). For viewer to operate, connect it:

CJSCore::Init([ 'ui.viewer' ]);

Final code looks as follows:

<? CJSCode::Init([ 'ui.viewer' ]); ?>
<button
   class="ui-btn ui-btn-link"
   data-viewer="null"
   data-object-id="1234"
   data-viewer-type="document"
   data-src="'/disk/downloadFile/1234/?&ncc=1&filename=FileName.pdf'"
   data-title="FileName.pdf"
   data-actions="[{"type":"download"}]"
>OPEN FILE

Where:
1234 - file ID on disk
FileName.pdf - file name in viewer.

Example

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Image viewer");
   CJSCore::Init(Array("viewer"));
?>
   <div id="db-items" >
      <span class="feed-com-img-wrap" style="width:548px;">
         <img 
            onload="this.parentNode.className='feed-com-img-wrap';"
            src="http://www.bitrix24.com/upload/iblock/28b/box_cms_125_143x158.jpg"
            data-bx-viewer="image" 
            data-bx-title="CMS" 
            data-bx-src="http://www.bitrix24.com/images/gr/bus125_2/02.jpg" 
            data-bx-download="http://www.bitrix24.com/images/gr/bus125_2/02.jpg" 
            data-bx-width="548" 
            data-bx-height="346" 
         />
      </span>
      <span class="feed-com-img-wrap" style="width:548px;">
         <img 
            onload="this.parentNode.className='feed-com-img-wrap';"
            src="http://www.bitrix24.com/upload/iblock/d5b/box_cp_125_143x158.jpg"
            data-bx-viewer="image" 
            data-bx-title="KP" 
            data-bx-src="www.bitrix24.com/images/new/cp11/meeting/podg.png" 
            data-bx-download="www.bitrix24.com/images/new/cp11/meeting/podg.png" 
            data-bx-width="548" 
            data-bx-height="346" 
         />
      </span>
   </div>
<script>
BX.ready(function(){
   var obImageView = BX.viewElementBind(
      'db-items',
      {showTitle: true, lockScroll: false},
      function(node){
         return BX.type.isElementNode(node) && (node.getAttribute('data-bx-viewer') || node.getAttribute('data-bx-image'));
      }
   );
});
</script>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>