Playing with photos in VFP and web lightboxes
A fun transition time to time
You can have the case where some images are not visible !
Note that i used the real pictures an not real thumbnails.the origial photo is stretched only.
The images must also not be too big for working well.
Issue "clea all" always before running the code to clear memory.
Issue ESC at any time to close the form(the titlebar is hidden to make a real fullscreen)
This sample shows how to use
-arranging thumbnails photos on form
-using Bindevent
-moving objects on form without timer.
*Select code (left mouse+down arrow and scroll)+CTRL+C and paste into a prg
See some screenshots below
*Begin code
clea all
Publi yform
yform=Newobject("ylightbox")
yform.Show
Read Events
Return
*
Define Class ylightbox As Form
BorderStyle = 3
Height = 650
Width = 960
ShowWindow = 2
ScrollBars = 2
ShowTips = .T.
AutoCenter = .T.
Caption = ""
MaxButton = .F.
KeyPreview = .T.
BackColor = Rgb(0,0,0)
ycl = 0
xleft = .F.
xtop = .F.
xwidth = .F.
xheight = .F.
w0 = .F.
h0 = .F.
l0 = .F.
t0 = .F.
Procedure my
Lparameters nButton, nShift, nXCoord, nYCoord
With Thisform
.SetAll("visible",.F.,"image")
.ScrollBars=0
.BackColor=0
Endwith
* aevent create an array laEvents
Aevents( myArray, 0)
* reference the calling object
loObject = myArray[1]
With Thisform
.ycl=.ycl+1
If .ycl>1
.ycl=0
Endi
Do Case
Case .ycl=1
.w0=loObject.Width
.h0=loObject.Height
.l0=loObject.Left
.t0=loObject.Top
sleep(100)
loObject.Left=(.Width -loObject.Width)/2
loObject.Top =(.Height-loObject.Height)/2
sleep(10)
With loObject
.Visible=.T.
Do While .T.
.Width=.Width+10
.Height=.Height+10
.Left=.Left-5
.Top =.Top-5
sleep(20)
If .Width>=.Parent.Width And .Height>=.Parent.Height
Exit
Endi
Enddo
Endwith
Case .ycl=0
loObject.Width=.w0
loObject.Height=.h0
loObject.Left=.l0
loObject.Top=.t0
.Left=.xleft
.Top=.xtop
.Width=.xwidth
.Height=.xheight
.SetAll("visible",.T.,"image")
.BackColor=0
Thisform.ScrollBars=2
.Refresh
Endcase
Endwith
Endproc
Procedure my1
Lparameters nButton, nShift, nXCoord, nYCoord
* aevent create an array laEvents
Aevents( myArray, 0)
* reference the calling object
loObject = myArray[1]
With loObject
.Left=.Left-3
.Top=.Top-3
Endwith
Endproc
Procedure my2
Lparameters nButton, nShift, nXCoord, nYCoord
*aevent create an array laEvents
Aevents( myArray, 0)
*reference the calling object
loObject = myArray[1]
With loObject
.Left=.Left+3
.Top=.Top+3
Endwith
Endproc
Procedure Destroy
Clea Events
Endproc
Procedure Init
Set Safe Off
Publi m.yrep,gnbre
m.yrep=Getdir()
If Empty(m.yrep)
Return .F.
Endi
gnbre=Adir(gabase,"*.*")
If gnbre=0
Return .F.
Endi
Create Cursor ycurs (yimage c(150))
For i=1 To gnbre
If Inlist( Lower(Justext(gabase(i,1))),"png","jpg","bmp","gif")
Insert Into ycurs Values(m.yrep+gabase(i,1))
Endi
Endfor
xr=Reccount()
*brow
Thisform.Caption=Trans(xr)+" images in "+Justpath(m.yrep)
Local m.ymess
TEXT to m.ymess textmerge noshow
-<<xr>> images in <<justpath(m.yrep)>>
-Click on thumbnail to show it-Re click to return to form
- Issue ESC to close form.
ENDTEXT
Messagebox(m.ymess ,0+32+4096,'',2000)
m.yrep=Addbs(m.yrep)
Set Defa To (yrep)
Local m.xwidth,m.xheight,nimg
m.xwidth=90
m.xheight=90
l0=10
t0=10
nimg=Int(Thisform.Width/xwidth)
With Thisform
Sele ycurs
j=1
i=1
Scan
oo="yimage"+Trans(Recno())
.AddObject(m.oo,"image")
m.oo="."+m.oo
With Eval(m.oo)
.Stretch=2
.Width=m.xwidth
.Height=m.xheight
.Picture=yimage
.BorderStyle=1
.MousePointer=15
.Left =l0+(i-1)*m.xwidth
.Top =t0+(j-1)*m.xheight
.Visible=.T.
.ToolTipText=.Picture
Endwith
If i>nimg
j=j+1
i=1
Else
i=i+1
Endi
Endscan
Endwith
With Thisform
For i=1 To .ControlCount
If Lower(.Controls(i).Class)=="image"
Bindevent(Eval("thisform.yimage"+Trans(i)),"mousedown",Thisform,"my")
Bindevent(Eval("thisform.yimage"+Trans(i)),"mouseEnter",Thisform,"my1")
Bindevent(Eval("thisform.yimage"+Trans(i)),"mouseLeave",Thisform,"my2")
Endi
Endfor
.Left=-10
.Top=-35
.Width=Sysmetric(1)+10
.Height=Sysmetric(2)+35
.xleft=.Left
.xtop=.Top
.xwidth=.Width
.xheight=.Height
Endwith
Endproc
Procedure Load
Declare Integer Sleep In kernel32 Integer
Endproc
Procedure KeyPress
Lparameters nKeyCode, nShiftAltCtrl
If nKeyCode=27
Thisform.Release
Endi
Endproc
Enddefine
*
*Endcode
Click on any thumb to make motion and see on fullscreen.
In this second section, i adapted a web lightbox to the vfp web browser (emulation ie11).
the original lightbox CSS3 demo is from this link of René Domingue http://beta.rdsign.net/article_24 (thanks).
The web lightbox is made for some pictures or loaded from a server with a timeout.On the disc the acess is direct and can load many pictures.
The mixed code (VFP+CSS3+Html) can gather more images on disc than VFP form and there is no great problem with many images (and size).However there is always a limit not to be exceeded.
Issue always and still "clear all" before running the code to free memory in vfp.
I applyed a light transparency on the form
*Begin Code
clea all
Publi yform
yform=Newobject("ylightbox_web")
yform.Show
Read Events
Return
*
Define Class ylightbox_web As Form
Height = 449
Width = 769
ShowWindow = 2
AutoCenter = .T.
Caption = ""
Name = "Form1"
Add Object olecontrol1 As OleControl With ;
Oleclass="Shell.explorer.2",;
Top = 0, ;
Left = 0, ;
Height = 457, ;
Width = 769, ;
Anchor = 15, ;
Name = "Olecontrol1"
Procedure Destroy
Try
Dele File (Addbs(Sys(2023))+"ylightbox.html"))
Catch
Endtry
Set Safe On
Clea Events
Endproc
Procedure Init
Set Safe Off
Thisform.WindowState=2
Publi m.yrep,gnbre
m.yrep=Getdir()
If Empty(m.yrep)
Return .F.
Endi
m.yrep=Addbs(m.yrep)
_Screen.WindowState=1
gnbre=Adir(gabase,"*.*")
If gnbre=0
Return .F.
Endi
Create Cursor ycurs (yimage c(150))
For i=1 To gnbre
If Inlist( Lower(Justext(gabase(i,1))),"png","jpg","bmp","gif")
Insert Into ycurs Values(m.yrep+Allt(yimage))
Endi
Endfor
m.xr=Reccount()
Thisform.Caption=Trans(m.xr)+" images in "+Justpath(m.yrep)
Set Defa To (yrep)
local m.var1,m.var2,m.var3,m.var4,m.var5,m.var6,m.var7,m.var8,m.var9,m.var10,cr
m.cr=Chr(13)
m.var1=""
Scan
i=Recno()
m.var1=m.var1+[.b]+Trans(i)+":focus ~ .p"+Trans(i)+" {left:0;}"+m.cr
Endscan
m.var2=""
Scan
i=Recno()
m.var2=m.var2+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .backdrop {left:0;}"+m.cr
Endscan
m.var3=""
Scan
i=Recno()
If ! i=Reccount()
m.var3=m.var3+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame p.instructions,"+m.cr
Else
m.var3=m.var3+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame p.instructions"+m.cr
Endi
Endscan
TEXT to m.x noshow
{
opacity:1;
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-transition: opacity 0.5s linear 2s;
-ms-transition: opacity 0.5s linear 2s;
-o-transition: opacity 0.5s linear 2s;
-webkit-transition: opacity 0.5s linear 2s;
transition: opacity 0.5s linear 2s;
}
ENDTEXT
m.var3=m.var3+m.x+m.cr
m.var4=""
Scan
i=Recno()
If !i=Reccount()
m.var4=m.var4+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder,"+m.cr
Else
m.var4=m.var4+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder"+m.cr
Endi
Endscan
TEXT to m.x noshow
{
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
ENDTEXT
m.var4=m.var4+m.x+m.cr
m.var5=""
Scan
i=Recno()
If ! i=Reccount()
m.var5=m.var5+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder > .innerHolder,"+m.cr
Else
m.var5=m.var5+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder > .innerHolder"+m.cr
Endi
Endscan
TEXT to m.x noshow
{
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
ENDTEXT
m.var5=m.var5+m.x+m.cr
m.var6=""
Scan
i=Recno()
If ! i=Reccount()
m.var6=m.var6+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder img.pic,"+m.cr
Else
m.var6=m.var6+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder img.pic"+m.cr
Endi
Endscan
TEXT to m.x noshow
{
opacity:1;
-moz-transition: opacity 0.5s linear 1s;
-ms-transition: opacity 0.5s linear 1s;
-o-transition: opacity 0.5s linear 1s;
-webkit-transition: opacity 0.5s linear 1s;
transition: opacity 0.5s linear 1s;
}
ENDTEXT
m.var6=m.var6+m.x+m.cr
m.var7=""
Scan
i=Recno()
If ! i=Reccount()
m.var7=m.var7+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder p,"+m.cr
Else
m.var7=m.var7+".b"+Trans(i)+":focus ~ .p"+Trans(i)+" .frame .imageHolder p"+m.cr
Endi
Endscan
TEXT to m.x noshow
{
margin-top:0;
opacity:1;
-moz-transition: 0.10s linear 1.5s;
-ms-transition: 0.10s linear 1.5s;
-o-transition: 0.10s linear 1.5s;
-webkit-transition: 0.10s linear 1.5s;
transition: 0.10s linear 1.5s;
}
ENDTEXT
m.var7=m.var7+m.x+m.cr
m.xx=""
TEXT to m.xx noshow
/* for Internet Explorer */
/* trigger for IE */
#lightbox a.thumb,
body { behavior:url(trigger.htc) }
ENDTEXT
m.xx=m.xx+m.cr
m.var8=""
Scan
i=Recno()
m.var8=m.var8+".b"+Trans(i)+":active ~ .p"+Trans(i)+" {left:0;}"+m.cr
Endscan
m.var8a=""
Scan
i=Recno()
m.var8a=m.var8a+".b"+Trans(i)+":active ~ .p"+Trans(i)+" .backdrop {left:0;}"+m.cr
Endscan
m.var8=m.xx+m.var8+m.var8a
m.var9=""
Scan
i=Recno()
m.var9=m.var9+;
[<a href="#x" class="thumb b]+Trans(i)+[" tabindex="]+Trans(i)+["><img src="file:///]+Strtran(m.yrep+gabase(i,1),"\","/")+[" alt=""></a>]+m.cr
Endscan
m.var10=""
Scan
i=Recno()
TEXT to m.x textmerge noshow
<div class="holder p<<trans(i)>>">
<div class="backdrop"></div>
<div class="frame">
<div class="imageHolder">
<div class="innerHolder"> <img class="pic" src="file:///<<strtran(m.yrep+gabase(i,1),"\","/")>>" alt="">
<p>Image <<trans(i)>> de <<trans(gnbre)>><br>
<<gabase(i,1)>></p>
<p class="FERMER">FERMER X</p>
</div>
</div>
</div>
</div>
ENDTEXT
m.var10=m.var10+m.x+m.cr
Endscan
Local m.thumbheight
m.thumbheight=60
Local m.myvar
TEXT to m.myvar textmerge noshow
<style type="text/css">
html { -webkit-animation: safariSelectorFix infinite 1s; }
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
h4{margin-bottom:10px;}
#lightbox { display:inline-block; margin:10px auto; height:100%; vertical-align:middle; }
.holder { position:fixed; width:100%; height:100%; display:table; text-align:center;
left:-9999px; top:0; z-index:100; }
.holder p.instructions { font:bold 10px/15px verdana, arial, sans-serif; color:#ddd; margin:0;
opacity:0; filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-transition: opacity 0.25s linear 0s; -ms-transition: opacity 0.25s linear 0s;
-o-transition: opacity 0.25s linear 0s; -webkit-transition: opacity 0.25s linear 0s;
transition: opacity 0.25s linear 0s; }
.backdrop { position:fixed; left:-9999px; top:0; width:100%; height:100%; background:#000;
opacity:0.7; filter: alpha(opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
z-index:-1; }
.frame { display:table-cell; vertical-align:middle; }
.innerHolder { display:inline-block; background:#fff;
padding:10px; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -o-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1); transform: scaleY(0.1);
-moz-transition: -moz-transform 0.5s linear 0s;
-ms-transition: -ms-transform 0.5s linear 0s; -o-transition: -o-transform 0.5s linear 0s;
-webkit-transition: -webkit-transform 0.5s linear 0s; transition: transform 0.5s linear 0s; }
.innerHolder { *display:inline; *margin-top:50px;}
.imageHolder { display:inline-block; overflow:hidden; position:relative; -moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1); -o-transform: scaleX(0.1); -webkit-transform: scaleX(0.1);
transform: scaleX(0.1); -moz-transition: -moz-transform 0.5s linear 0.5s;
-ms-transition: -ms-transform 0.5s linear 0.5s; -o-transition: -o-transform 0.5s linear 0.5s;
-webkit-transition: -webkit-transform 0.5s linear 0.5s; transition: transform 0.5s linear 0.5s; }
.imageHolder { *display:inline;}
.imageHolder img.pic { opacity:0; display:block; position:relative; z-index:10;
-moz-transition: opacity 0.25s linear 0s; -ms-transition: opacity 0.25s linear 0s;
-o-transition: opacity 0.25s linear 0s; -webkit-transition: opacity 0.25s linear 0s;
transition: opacity 0.25s linear 0s; }
.imageHolder p { font:bold 12px/18px verdana, arial, sans-serif; color:#444; margin:0;
height:40px; padding:10px 0 0 0; margin-top:-50px; z-index:5; opacity:0; text-align:left;
clear:left; float:left; width:100%; -moz-transition: 0.25s linear 0s;
-ms-transition: 0.25s linear 0s; -o-transition: 0.25s linear 0s; -webkit-transition: 0.25s linear 0s;
transition: 0.25s linear 0s; }
.imageHolder p.FERMER { text-align:right; font-size:14px; position:absolute; right:10px;
bottom:-10px; cursor:pointer; color:#888; }
.thumb { outline:0; }
.thumb img { height:<< m.thumbheight>>px; border: 5px solid #FFE4C4 ; margin: 5px;}
/* non IE browsers */
<<m.var1>>
<<m.var2>>
<<m.var3>>
<<m.var4>>
<<m.var5>>
<<m.var6>>
<<m.var7>>
<<m.var8>>
.thumb:active ~ .holder .frame .imageHolder {-ms-transform: scale(1, 1);transform: scale(1, 1);}
.thumb:active ~ .holder .frame .imageHolder > .innerHolder {-ms-transform: scale(1, 1);transform: scale(1, 1);}
.thumb:active ~ .holder .frame .imageHolder img.pic {opacity:1;-ms-transition: opacity 0.5s linear 1s;transition: opacity 0.5s linear 1s;}
.thumb:active ~ .holder .frame .imageHolder p {margin-top:0;opacity:1;-ms-transition: 0.25s linear 2.5s;transition: 0.25s linear 2.5s;}
</style>
<BODY BGCOLOR=black oncontextmenu="return true;" scroll="yes">
<div id="lightbox">
<<m.var9>>
<<m.var10>>
</div>
</body>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"ylightbox.html"
If File(m.lcdest)
Dele File (m.lcdest)
Endi
Inke(0.1)
Strtofile(m.myvar,m.lcdest)
_Cliptext=m.lcdest
With Thisform.olecontrol1
.silent=.T.
.Navigate(m.lcdest)
Endwith
_Sol_SetWindowLong(Thisform.HWnd, -20, 0x00080000)
_Sol_SetLayeredWindowAttributes(Thisform.HWnd, 0,240, 2) &&making a very light transparency
Endproc
Procedure Load
Declare SetWindowLong In Win32Api As _Sol_SetWindowLong Integer, Integer, Integer
Declare SetLayeredWindowAttributes In Win32Api As ;
_Sol_SetLayeredWindowAttributes Integer, String, Integer, Integer
Close Data All
Endproc
Enddefine
*
*Endcode
