Перейти к содержанию

Галерея изображений

Для вывода на портал галереи изображений используется виджет Smart Html и js-вставки для портала. По клику на изображение вызывается просмотрщик Галереи изображений — fileViewer.

Галерея изображений в портальном блоке

[1. Просмотрщик fileViewer настраивается в JS-вставке](../

Список файлов для просмотра формируется с помощью смарт-выражения, возвращающего список идентификаторов FileID. В данном примере в галерею выводятся все файлы, вложенные в задачу с номером 123456, а смарт-выражение (1) строится с помощью запроса TSQL. 

select FileID from FileStorageFileToTaskLinks where TaskID = 123456 and IsDeleted = 0
В блоке Smart Html (2) настраивается отображение файлов, возвращаемых данным смартом (в данном примере смарт-выражение имеет ID=123). Настройка виджетов Smart Html описана здесь. 
<style>
.block-main{position:relative}
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, 32%);
 grid-gap: 10px;
 align-items: stretch;
 }
.gallery-photo{
 height:92px;
 background-size: cover;
 background-position: center;
 }
</style>
<div class='block-main'>
<div class='gallery-grid'>
   {{#smart123}}
  <a class='gallery-photo' style='background-image:url("/GetAttachment.ashx?id={{fileID}}")' href='/GetAttachment.ashx?id={{fileID}}'></a>
   {{/smart123}}
</div>
</div>
По клику на изображение вызывается просмотрщик Галереи изображений — fileViewer, который настраивается в JS-вставке портала (3). Для него предварительно формируется массив элементов \fileType, url\, содержащий ссылки на все изображения в галерее. 
(window.firstForma.portal.block(11)).onLoaded(function () {
  var arr = document.querySelectorAll('.gallery-photo');
  var filesArr = []

  arr.forEach(function(item, index){
     filesArr.push({fileType: 'image', url: arr[index].href})
  });
  arr.forEach(function(item, index){
     arr[index].addEventListener('click', function(event)  {   
       event.preventDefault();
      window.firstForma.fileViewer(filesArr, index);
     });
  });
});

Настройка галереи изображений в портальном блоке с помощью js-вставки. 2. Просмотрщик fileViewer настраивается в смарт-выражении:

Список файлов для просмотра формируется с помощью смарт-выражения, возвращающего список идентификаторов FileID. В данном примере в галерею выводятся все файлы, вложенные в задачу с номером 123456, а смарт-выражение (1) строится с помощью запроса TSQL. 

select FileID,
'{url:"/GetAttachment.ashx?id="'+CONVERT (varchar(10),FileID)+',fileType:"image"}' AS filelink
from FileStorageFileToTaskLinks where TaskID = 123456 and IsDeleted = 0
Второе смарт-выражение (2) формирует массив для просмотрщика Галереи изображений — fileViewer (char(39) — символ одинарной кавычки). 
DECLARE @var varchar(max) = '' 
SELECT @var=@var+','+
'{url:'+char(39)+'/GetAttachment.ashx?id='+CONVERT (varchar(10),FileID)+char(39)+',fileType:'+char(39)+'image'+char(39)+'}'
from FileStorageFileToTaskLinks where TaskID = 123456 and IsDeleted = 0 
SELECT 'javascript: firstForma.fileViewer([' + SUBSTRING(@var,2,len(@var)-1) + ']);' as url
В блоке Smart Html (3) настраивается отображение файлов, возвращаемых этими смартами (в данном примере они имеют ID=123 и 456 соответственно). Настройка блоков Smart Html описана здесь. 
<style>
.block-main{position:relative}
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, 32%);
 grid-gap: 10px;
 align-items: stretch;
 }
.gallery-photo{
 height:92px;
 background-size: cover;
 background-position: center;
}
</style>
<div class='block-main'>
<div class='gallery-grid'>
 {{#smart123}} {{#smart456}}
 <a class='gallery-photo' style='background-image:url(/GetAttachment.ashx?id={{fileid}}&FromPlayer=1)' onclick='{{url}}' href='javascript:;'></a>
 {{/smart456}} {{/smart123}}
 </div>
</div>
При такой настройке блока дополнительно настраивать JS-вставку для портала не требуется, все настройки для fileViewer формируются во втором смарт-выражении. Настройка галереи изображений в портальном блоке с помощью смарт-выражений Полезные ссылки

Портальный блок Smart Html

JS-вставки для портала