LightWindow: Casi casi perfecto

JMiur
Epa! Esto s que funciona muy bien!
anto dar !ue"tas buscando a"g#n tipo de script que permita uti"i$ar a"g#n tipo de !entana
moda" a" esti"o VideoBox% LightBox% PopBox o SlimBox que funcione correctamente y
que sea "o suficientemente !ers&ti" como para permitir mostrar todo tipo de archi!os y aqu
esta% se ""amaLightWindow'
()or que me parece que esta es me*or que todas "as otras que he probado+ )orque%
entre otras cosas pueden mostrarse:
C"ic, sobre cada cono para !er una demostraci-n'
Esto de mostrar "as cosas en !entanas moda"es es muy "indo pero tambi.n es mo"esto
tener que e"egir uno u otro mode"o porque cada uno de e""os hace a"go diferente% uno para
!ideos% otro para im&genes% ni hab"ar de compatibi"idades' LightWindow tiene "a
particu"aridad de poder mane*ar pr&cticamente cua"quier tipo de archi!o mu"timedia y "os
detecta autom&ticamente' /dem&s% es compatib"e
con 0irefo1% 2E3% 2E4% 5afari y 6pera tanto en Windows como en Mac'
La !entana puede persona"i$arse todo "o que uno quiera y podemos crear ga"eras con
cua"quier tipo de archi!o% co"ocar ttu"os% descripciones% etc'
)rimero que nada% descargamos e" 72) que contiene una serie de archi!os y carpetas
que inc"uyen demostraciones !arias' 8e todos e""os% "os que necesitamos a"o*ar en un
ser!idor propio son:
prototype.js
scriptaculous.js
effects.js
lightwindow.js
lightwindow.css
Como e" framework prototype es de uso bastante com#n y se emp"ea para di!ersas
funciones y trucos% si ya "o hemos inc"uido en nuestra p"anti""a no deberemos
preocuparnos y uti"i$amos e" que tenemos9 a "o sumo% !erificamos si "a !ersi-n es
adecuada y si no% "a reemp"a$amos por una m&s nue!a' Lo mismo puede decirse
de script.aculo.us y de su "ibrera effects'
Los otros dos archi!os% lightwindow.js y lightwindow.css son "os que nos importan y "os
que pueden modificarse para adaptarse a nuestras necesidades' )or e*emp"o%
deberamos a"o*ar "as im&genes uti"i$adas y cambiar "as direcciones de: ajax-
loading.gif% black.png% black-!.png% arrow-down.gif% arrow-up.gif% pre"label.gif y ne
xtlabel.gif'
5i esto resu"ta comp"icado% puede descargarse este otro 72) que contiene s-"o "os
archi!os necesarios y donde ya "os he modificado% a"o*ando "as im&genes
en #mageShack'
:na !e$ que tenemos a"o*ados "os archi!os% "os inc"uimos en "a p"anti""a% por e*emp"o% *usto
antes de$%head&:
;script type<=te1t>*a!ascript= src<=:?L@prototype'*s=A;>scriptA
;script type<=te1t>*a!ascript= src<=:?L@scriptacu"ous'*s+"oad<effects=A;>scriptA
;script type<=te1t>*a!ascript= src<=:?L@"ightwindow'*s=A;>scriptA
;"in, re"<=sty"esheet= href<=:?L@"ightwindow'css= type<=te1t>css= media<=screen= >A
8onde cambiamos "as direcciones :?L por "as de nuestros archi!os'
E" script es muy senci""o de uti"i$ar% basta agregar "a c"ase lightwindow a cua"quier
en"ace% por e*emp"o:
;a href<=:?L@archi!o= c"ass<="ightwindow=AENLACE;>aA
E" en"ace puede ser un te1to% un cono o una miniatura:
'L#'(
En rea"idad% eso es todo% no hace fa"ta nada m&s% de manera autom&tica%
e" script reconocer& e" tipo de archi!o a" que se refiere e" en"ace y actuar& en
consecuencia'
2m&genes en formato bmp% gif% *pg% png y tiff
Bideos en formato a!i% di!1% mC!% mD!% m*pg% moo!% mo!% mo!ie% mpa% mpe% mpeg%
mpg% qt% !i!% !i!o y wm!'
/udio en formato aif% aiff% mDa% mEu% mid% midi% mpD% mpE% mpa% mpg% mpga% ram y
wa!'
)&ginas en formato asp% asp1% cgi% htm% htm"% p"% phpF% phpE% php% phpG% phtm"% rb%
rhtm"% shtm"% t1t% y !bs'
/p"icaciones en formato asf% pdf% pps% rm y swf'
)or supuesto% e" na!egador tendr& que tener "os plugins necesarios para !er"os y%
e!entua"mente Hpor e*emp"o en e" caso de" di!1I% habr& que modificar e" script para que
cargue "os c-digos necesarios' En "a p)gina principal del proyecto% hay una descripci-n
de "as instrucciones uti"i$adas% "os tipos M2ME soportados y
"os plugins y /cti!eJ estab"ecidos por defecto'
)ara crea una ga"era% e" criterio es e" mismo% ponemos en"aces a cada uno de "os archi!o
y "es agregamos a todos e""os un atributo +,L con e" mismo !a"or% por e*emp"o:
;a href<=:?L@archi!oC= c"ass<="ightwindow= re"<=tu"o8emoK5ubttu"oL=AENLACE 1;>aA
;a href<=:?L@archi!oD= c"ass<="ightwindow= re"<=tu"o8emoK5ubttu"oL=AENLACE 2;>aA
;a href<=:?L@archi!oE= c"ass<="ightwindow= re"<=tu"o8emoK5ubttu"oL=AENLACE 3;>aA
M si s-"o queremos mostrar un en"ace:
;a href<=:?L@archi!oC= c"ass<="ightwindow= re"<=tu"o8emoK5ubttu"oL=AENLACE;>aA
;a href<=:?L@archi!oD= c"ass<="ightwindow= re"<=tu"o8emoK5ubttu"oL=A;>aA
;a href<=:?L@archi!oE= c"ass<="ightwindow= re"<=tu"o8emoK5ubttu"oL=A;>aA
5i bien "a forma senci""a es agregar "a c"ase lightwindow a" en"ace% hay otras propiedades
con "as que podemos persona"i$ar cada en"ace% para esto% usamos e" atributo P-+-.S:
;a c"ass<="ightwindow= href<=:?L@arhi!o= params<="ista de par&metros=AENLACE;>aA
Los par&metros que podemos usar son:
lightwindow/width es e" ancho de "a !entana Hen pi1e"esI
lightwindow/height es e" a"to de "a !entana Hen pi1e"esI
lightwindow/top es "a distancia entre e" borde superior de "a panta""a y e" inicio de "a
!entana
lightwindow/left es "a distancia entre e" borde i$quierdo de "a panta""a y e" inicio de "a
!entana
lightwindow/loading/animation se estab"ece en false para no mostrar e" efecto fade a"
cargarse
,0,.PL12 :na !entana de 3!! x 456 para contener un !ideo de 7oogle
Videos K'L#'(L
6tros par&metros son especficos para casos especia"es:
lightwindow/show/images indica "a cantidad de im&genes a mostrar simu"t&neamente
en una ga"era He" !a"or por defecto es 8I
lightwindow/type es optati!o e indica c-mo debe ser interpretado e" en"ace Hpage%
e1terna"% image% media% in"ineI
lightwindow/iframe/embed se uti"i$a para incrustar e" medio dentro de un 20?/ME en
"ugar de un82B
lightwindow/form indica e" nombre si estamos uti"i$ando e" script para mostrar un
formu"ario
5i queremos usar !arios par&metros% "os separamos por comas% por e*emp"o:
params<"ightwindow@width<FDG%"ightwindow@height<EGN%"ightwindow@"oading@animation<
true=
params<="ightwindow@width<GNN%"ightwindow@height<GNN%"ightwindow@show@images<D=
6tros atributos especia"es son tambi.n opciona"es: title% author y caption se uti"i$an para
mostrar determinados te1tos'
;a c"ass<="ightwindow= href<=:?L@archi!o=
tit"e<=une1to=
caption<=une1to=
author<=une1to=
params<=lista de parmetros=AENLACE;>aA
,0,.PL12 donde se muestran "os tres atributos K'L#'(L
ambi.n podemos co"ocar contenido inline (qu. es esto+ )u.s podemos mostrar a"go
que tenemos en nuestra propia p&gina o post% a"go que =ocu"tamos= y s-"o mostramos a
tra!.s de un en"ace:
;a href<=Onombre28= c"ass<="ightwindow=AENLACE;>aA
;di! id<=nombre28= sty"e<=disp"ay: none9=A
;di!A... cualquier contenido H!L ...;>di!A
;>di!A
,0,.PL12 donde se muestra un 82B ocu"to K'L#'(L
/"gunas propiedades que pueden persona"i$arse:
9lightwindow/title/bar e" &rea superior donde se muestra e" atributo :#:L, y e" en"ace
que permite cerrar "a !entana
9lightwindow/title/bar/title es e" te1to de" atributo :#:L,
9lightwindow/title/bar/close/link es e" en"ace con e" te1to =close=
9lightwindow/data/caption es e" te1to de" atributo '-P:#1;
9lightwindow/data/author es e" te1to de" atributo -<:=1+
Esto "o podemos hacer modificando e" archi!o lightwindow.css o sobrescribi.ndo"o en
nuestra p"anti""a% agregando una etiqueta S:>L, inmediantamente despu.s de" en"ace a
"a ho*a de esti"o:
;"in, re"<=sty"esheet= href<=:?L@"ightwindow'css= type<=te1t>css= media<=screen= >A
;sty"e type<Pte1t>cssPA
O"ightwindow@tit"e@bar@tit"e Q ''' R
aO"ightwindow@tit"e@bar@c"ose@"in,% a:"in,O"ightwindow@tit"e@bar@c"ose@"in,%
a:!isitedO"ightwindow@tit"e@bar@c"ose@"in, Q ''' R
a:ho!erO"ightwindow@tit"e@bar@c"ose@"in,% a:acti!eO"ightwindow@tit"e@bar@c"ose@"in, Q ''' R
O"ightwindow@data@caption Q ''' R
O"ightwindow@data@author Q ''' R
;>sty"eA