Expressant TI

No és que no són només uns pocs lightbox que vostè pot trobar quan busques a google. El problema amb la major part de la caixa de llum que vaig trobar va ser que tots semblaven utilitzar un o els altres marcs pesats JAVASCRIPT pes, com jQuery, Prototype, Mootools i els gustos. Tots ells són fresc i elegant cerca. Però si el seu requeriment és "però vull un SCRIPT lightbox simple i lleugera per al meu lloc", llavors aquí és;

Algunes característiques interessants d'aquesta caixa de llum

1. Molt clar
   una. 4KB de seqüència quan s'envasa (8 kb sense embalatge)
   b. 2 kb de CSS
   c. Poques línies d'HTML per al contenidor de la col · lecció
2. Fàcil d'entendre i aplicar
3. Pot tenir diverses caixes de llum a la mateixa pàgina.
4. El contenidor de la col · lecció s'utilitza la mateixa per mostrar, als diferents continguts (que s'inclouen per separat en divisions ocultes a la pàgina), en funció de la relació / opció que es fa clic.
5. Se centra automàticament, tenint en compte tots els factors com ara, l'alçada i l'amplada de finestra (resolució de la pantalla), la quantitat de desplaçament de pàgines i l'alçada dels continguts de la caixa de llum
6. Provat en IE 7 i FF

Veure demostració |
Descarregueu la taula de llum Postal Font (Descarregat 1804 vegades)

jo.js i jo_pack.js [versió]: - ple d'un simple conjunt d'objectes JavaScript [JO], que conté els elements, finestres i guions de documents de posicionament. Podeu obrir JO.JS si voleu embrutar-se les mans amb una mica de Javascripting avançada, la creació de funcions abstractes, que s'estén propietats dels elements i tal. Si no massa Javascripting, no el toqueu.

lightbox.js, lightbox_pack.js [versió plena de]: - Conté seqüències d'ordres d'administrador de la caixa de llum. Si vostè és dissenyador de la pàgina, també és responsable d'implementar la taula de llum a la pàgina, heu d'entendre la LightBoxManager. LightBoxManager conté bàsicament showLightBox només dues funcions i closeLightBox.

lightbox.css: - Si coneixes CSS, es pot jugar amb lightbox.css per personalitzar l'aspecte-n-feel lightbox.css

index.html: aplicació de mostra de la caixa de llum amb dos continguts diferents

lb_underlay_bkg.png: - Aquesta és la llum / Simi imatge transparent que s'utilitza el fons per a la capa base la col · lecció [calc subjacent és la capa sota de la lighbox, que evita que l'usuari faci clic a qualsevol altra entitat a la pàgina, mentre que la col · lecció està oberta]. Es pot utilitzar qualsevol imatge o fins i tot un color sòlid per a aquest propòsit, depenent del disseny de la pàgina i l'exigència.

icon_lb_close.gif: - La imatge de la col.lecció de mànec prop de la part superior dreta de la caixa de llum. Podeu utilitzar qualsevol imatge com pel disseny

Veure demostració |
Descarregueu la taula de llum Postal Font (Descarregat 1804 vegades)

Si us plau, faci'ns arribar els seus comentaris i suggeriments ...