Creating simple simple slider in UniGUI with fadeOut/fadeIn effect.

[elGringo]

When i was searching for slider in forum i found some posts, but couldn't apply those decisions. Also i found WOW slider - but it didn't work correct in my project. All of them was beautiful and amazing - that is true. But sometimes it is needed just some working decision. So I've created my simple simple slider.

 

Working example is here

 

Code below

 

Getting pics for slider, lets say max number is 10

procedure TSlider.DataModuleCreate(Sender: TObject);

var appPath:string;

begin
FSlidePathesSL:=TStringList.Create;

FSlidePathesSL.Clear;



if TFile.Exists( UniServerModule.StartPath+'pics\slides\1.jpg'  ) then
FSlidePathesSL.Add('pics\slides\1.jpg');

if TFile.Exists( UniServerModule.StartPath+'pics\slides\2.jpg'  ) then
FSlidePathesSL.Add('pics\slides\2.jpg');

if TFile.Exists( UniServerModule.StartPath+'pics\slides\3.jpg'  ) then
FSlidePathesSL.Add('pics\slides\3.jpg');


if TFile.Exists( UniServerModule.StartPath+'pics\slides\4.jpg'  ) then
FSlidePathesSL.Add('pics\slides\4.jpg');


if TFile.Exists( UniServerModule.StartPath+'pics\slides\5.jpg'  ) then
FSlidePathesSL.Add('pics\slides\5.jpg');


if TFile.Exists( UniServerModule.StartPath+'pics\slides\6.jpg'  ) then
FSlidePathesSL.Add('pics\slides\6.jpg');


if TFile.Exists( UniServerModule.StartPath+'pics\slides\7.jpg'  ) then
FSlidePathesSL.Add('pics\slides\7.jpg');


if TFile.Exists( UniServerModule.StartPath+'pics\slides\8.jpg'  ) then
FSlidePathesSL.Add('pics\slides\8.jpg');


if TFile.Exists( UniServerModule.StartPath+'pics\slides\9.jpg'  ) then
FSlidePathesSL.Add('pics\slides\9.jpg');


if TFile.Exists( UniServerModule.StartPath+'pics\slides\10.jpg'  ) then
FSlidePathesSL.Add('pics\slides\10.jpg');



end;

We need uniImage on some Form or Frame, a named it iSlide in code

 

Then we need unitimer on some Form or Frame. UniTimer works only on Form or Frame in UniGUI.

Setting interval to 500 miliseconds!!! <<<

And handling onTimer Event.

procedure TClientForm.SliderTimerTimer(Sender: TObject);
var
  picture: tpicture;
begin


 picture:=TPicture.Create;

 try

  SliderTimer.Tag:=SliderTimer.Tag+1;

  if (SliderTimer.Tag=6)  then 
     UniSession.AddJS(iSlide.JSName + '.el.fadeOut({duration: 1000})');
  

  if SliderTimer.Tag=8 then begin
  // nextSlide
  Inc(FSlideNumber);
  if  FSlideNumber=FSlider.SlidePathesSL.Count-1+1 then FSlideNumber:=0;

  picture.LoadFromFile(UniServerModule.StartPath+FSlider.SlidePathesSL[FSlideNumber]);
  iSlide.Picture.Bitmap:=nil;
  iSlide.Picture.Assign(picture); 

  end;

  if SliderTimer.Tag=8 then begin 
  UniSession.AddJS(iSlide.JSName + '.el.fadeIn({duration: 1000})');
  SliderTimer.Tag:=0;
  end;


 
 finally
 picture.Free;
 end;

 

end;

One thing to improve sliding, suggested by DD - is to use 2 uniimages to avoid white space beetwen slides. I will do it later and post here.

 

Also other effects could be applied, not only fade - but for that we should look to Sencha docs API! Or I suppose jQuery also could be used here.

 

Best wishes to all! If you have another decisions - please share. 

 

DD, special thanks for extJS fade effect!

[Sherzod]

Thanks for sharing!

[mehmet07]

thanks elGringo

[epos4u]

elGringo,

 

thank you, looks really good

[Abaksoft]

Super elGringo !

Congratulations...

[Marlon Nardi]

Congratulations, I liked your site 

[Nijazi]

Hi,

 

when I try to compile this sample I'm receiving message :

Undeclared identifier TFiels.

 

 

Regards,
Nijazi

[Luis German]

Hello:

Could you publish the source?

Thanks

Luis