Best way to display selection of images ?

[david_navigator]

I have the need to display images to the user. There might be zero images or there might be 20. They only need to be shown thumbnail size initially and then displayed full size if the user clicks on one. As the number of images can vary I was thinking of something like this 

There's a working version here https://www.wonderplugin.com/wordpress-carousel/examples/wordpress-carousel-slider-id4/ that auto scrolls and displays a large image when clicked on, but I'm not sure where to even start doing this kind of thing with UniGui.

Has anyone done anything similar or got some other suggestions ?

Thanks

David

[irigsoft]

1 hour ago, david_navigator said:

I have the need to display images to the user. There might be zero images or there might be 20. They only need to be shown thumbnail size initially and then displayed full size if the user clicks on one. As the number of images can vary I was thinking of something like this 

There's a working version here https://www.wonderplugin.com/wordpress-carousel/examples/wordpress-carousel-slider-id4/ that auto scrolls and displays a large image when clicked on, but I'm not sure where to even start doing this kind of thing with UniGui.

Has anyone done anything similar or got some other suggestions ?

Thanks

David

Hello,

I was made this with uniDBGrid.

I don't know if this is the best way, but for me it's a working way

[artem_niko]

On 4/3/2021 at 11:49 PM, david_navigator said:

I have the need to display images to the user. There might be zero images or there might be 20. They only need to be shown thumbnail size initially and then displayed full size if the user clicks on one. As the number of images can vary I was thinking of something like this 

There's a working version here https://www.wonderplugin.com/wordpress-carousel/examples/wordpress-carousel-slider-id4/ that auto scrolls and displays a large image when clicked on, but I'm not sure where to even start doing this kind of thing with UniGui.

Has anyone done anything similar or got some other suggestions ?

Thanks

David

Hello everyone!
Does anyone have any idea how to make a carousel like this through UniGUI?
I need to make a display of photos, looking for various options.

[Sherzod]

2 hours ago, Артем said:

Does anyone have any idea how to make a carousel like this through UniGUI?
I need to make a display of photos, looking for various options.

Hello,

For a desktop application?

[artem_niko]

2 minutes ago, Sherzod said:

Hello,

For a desktop application?

Yes, for example for desktop application

[x11]

К сожалению в uniGUI до сих пор нет галереи

Я использую панель tuniPanel с Layout в виде acordion

 

type

  TUniPanelPhotos = class(TUniPanel)
    public
      img: TuniImage;
  end;

  TfrdEditObject = class(TfrdParentEdit)
...
...

implementation
...
...
procedure TfrdEditObject.LoadPhotosImages;
Var
  sURL, sLocalPath, sFile: string;
  arrFiles: TStringDynArray;
  img: TUniImage;
  pnlImage: TUniPanelPhotos;
begin
// загрузить на форму фото объекта

  sLocalPath := GetPhotoDirOfObject(fID.ToString, fCurrSuperType);// папка с картинками объекта
  if not DirectoryExists(sLocalPath) then
    exit;

  sURL := GetPhotoUrlOfObject(fID.ToString, fCurrSuperType);// построить URL к картинкам

  arrFiles := GetListDocs(sLocalPath);// локальные полные пути к файлам
  try
    if Length(arrFiles) = 0 then
      exit;

    for var i := low(arrFiles) to High(arrFiles) do
    begin
      Inc(ipnlImageIndex);

      sFile := arrFiles[i];
      //панель, на которой будет лежать картинка
      pnlImage        := TUniPanelPhotos.Create(pnlPhotos);
      pnlImage.Name   := constPnlPhotoImageName + (i + 1).ToString;
      pnlImage.Title  := ExtractFileName(sFile);
      pnlImage.Images := UniMainModule.imgMainList;
      pnlImage.ImageIndex := 75;
      pnlImage.OnDblClick := pnlImageOnDblClick;
      pnlImage.JSInterface.JSConfig('cls', ['imgPhoto']);// для CSS для масштабирования
      pnlImage.Layout := 'fit';

      if i = 0 then
        fActivePhotoFileName := pnlImage.Title;//первая панель будет активная

      pnlImage.Parent := pnlPhotos;

      //картинка, которая будет лежать на панели
      img             := TUniImage.Create(pnlImage);
      pnlImage.img    := img;
      img.Parent      := pnlImage;

      if TFile.Exists(sFile) then
      begin
        img.Url  := sURL + ExtractFileName(sFile) + GetNoCacheString;
        img.Hint := img.Url;
        pnlImage.Hint := ExtractFileName(sFile);
      end;

    end;

  finally
    SetLength(arrFiles, 0);
  end;
end;

 

 

еще, для добавления картинок

procedure TfrdEditObject.FileUploadMultiCompleted(Sender: TObject; Files: TUniFileInfoArray);
begin
  inherited;
  // process files after all files are uploaded
  for var I := Low(Files) to High(Files) do
    if Assigned(Files[I].Stream) then
      AddImage(Files[I].Stream, Files[I].FileName);

  pnlPhotos.ClientEvents.ExtEvents.Values['afterrender'] :=
    'function afterrender(sender, eOpts)'+
    '{   '+
    '    var me=sender;      '+
    '    me.items.items.forEach(function(item){'+
    '        item.addListener("expand", function(){'+
    '            ajaxRequest(me, "_expand", ["uname="+me.layout.getExpanded()[0].uname]); '+
    '        })'+
    '    });   '+
    '}         ';

  if pnlPhotos.ComponentCount > 0 then
    checkPhoto.Checked := True;

end;

 

 

procedure TfrdEditObject.AddImage(const AStream: TStream; const  FileName: string);
Var
 ImgData: TImageData;
 sLocalPath, ADest, sURL: string;
 img: TUniImage;
 pnlImage: TUniPanelPhotos;
begin
// добавить фото к объекту

  sLocalPath := GetPhotoDirOfObject(fID.ToString, fCurrSuperType);
  if not DirectoryExists(sLocalPath) then
    ForceDirectories(sLocalPath);

  ADest := IncludeTrailingPathDelimiter(sLocalPath) + filename;
  Imaging.InitImage(ImgData);
  Imaging.LoadImageFromStream(AStream, ImgData);
  Imaging.SaveImageToFile(ADest, ImgData);


  //панель, на которой будет лежать картинка
  pnlImage        := TUniPanelPhotos.Create(pnlPhotos);
  pnlImage.Name   := constPnlPhotoImageName + (pnlPhotos.ControlCount + 1).ToString;
  pnlImage.Title  := FileName;
  fActivePhotoFileName := FileName;
  pnlImage.Images := UniMainModule.imgMainList;
  pnlImage.ImageIndex := 75;
  pnlImage.OnDblClick := pnlImageOnDblClick;
  pnlImage.Parent := pnlPhotos;
  pnlImage.JSInterface.JSConfig('cls', ['imgPhoto']);// для CSS для масштабирования
  pnlImage.Layout := 'fit';

  //картинка, которая будет лежать на панели
  img             := TUniImage.Create(pnlImage);
  pnlImage.img    := img;
  img.Parent      := pnlImage;
  //img.JSInterface.JSConfig('cls', ['imgPhoto']);

//  img.LayoutConfig.Width  := 'auto';
//  img.LayoutConfig.Height := '100%';

  if TFile.Exists(ADest) then
  begin
    sURL := GetPhotoUrlOfObject(fID.ToString, fCurrSuperType);
    img.Url  := sURL + FileName + GetNoCacheString;
    img.Hint := img.Url;
    pnlImage.Hint := FileName;
  end;

  Imaging.FreeImage(ImgData);
end;

 

еще

procedure TfrdEditObject.pnlPhotosAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
Var
 s: string;
 pnl: TControl;
begin
  if EventName = '_expand' then
  begin
    s := Params.Values['uname'];// см TfrdParentEditObj.pnlPhotosAjaxEvent + pnlPhotos.ClientEvents.ExtEvents/uniEvents
    pnl := pnlPhotos.FindChildControl(s);
    if pnl is TUniPanel then
      fActivePhotoFileName := (pnl as TUniPanel).Title
    else
      DoMessage(constMsgErrElementNotFound + ': ' + s, nil, 'TfrdParentEditObj.pnlPhotosAjaxEvent()');

  end;// if EventName = '_expand' then

end;

 

масштабирование

.imgPhoto img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}

 

Удаление

procedure TfrdEditObject.actPhotoDelExecute(Sender: TObject);
begin
  inherited;

  if pnlPhotos.ComponentCount <= 0 then exit;
  MyMessageDlg(constMsgPhotoDeleteConfirm, mtConfirmation, mbYesNo, PhotoDelCallBackProc);
end;

procedure TfrdEditObject.PhotoDelCallBackProc(Sender: TComponent; AResult: Integer);
Var
  pnl: TUniPanel;
  sLocalPath: string;
begin
  if AResult = mrNo then exit;

  if fActivePhotoFileName.IsEmpty then
  begin
    MyMessageBox(constAttention, constMsgSelectPhoto, TMsgDlgType.mtConfirmation);
    exit;
  end;

  pnl := FindPanelByFileName(fActivePhotoFileName);

  if not Assigned(pnl) then
  begin
    MyMessageShow(constMsgErrElementNotFound + ': "' + fActivePhotoFileName + '"', nil, self.ClassName + '.actPhotoDelExecute');
    exit;
  end;

  // полный локальный путь к файлу
  sLocalPath := IncludeTrailingPathDelimiter(GetPhotoDirOfObject(fID.ToString, fCurrSuperType)) + pnl.Title;

  if FileExists(sLocalPath) then
    if not DeleteFile(sLocalPath) then
      MyMessageShow(constMsgErrDelPhoto + ': "' + pnl.Title + '"', nil, self.ClassName + '.actPhotoDelExecute: ' + sLocalPath)
    else
    begin
      MyMessageShow(constAttention, constMsgPhotoDeleted, TMsgDlgType.mtInformation);
      FreeAndNil(pnl);
    end;
end;


function TfrdEditObject.FindPanelByFileName(sFileName: string): TUniPanel;
begin
  if sFileName.IsEmpty then
    exit(nil);

  result := nil;

  for var I := 0 to pred(pnlPhotos.ComponentCount) do
    if pnlPhotos.Components[i] is TUniPanel then
      if (pnlPhotos.Components[i] as TUniPanel).Title = sFileName then
        exit(pnlPhotos.Components[i] as TUniPanel);
end;

 

Отключить кэширование картинок

function GetNoCacheString: String;
begin
  result := '?' + FormatDateTime('ddmmyyyyhhmmss', Now);
end;

 

TImageData - это из библиотеки Vampyre Imaging.

[Sherzod]

On 4/3/2021 at 8:49 PM, david_navigator said:

Has anyone done anything similar or got some other suggestions ?

 

On 10/20/2021 at 12:45 PM, Артем said:

for example for desktop application

 

On 4/3/2021 at 10:00 PM, irigsoft said:

I was made this with uniDBGrid.