Eenvoudig, licht, Cross Browser Lightbox voor uw webpagina
Niet dat er slechts een paar LightBox's die je kunt vinden als je google. Het probleem met de meeste van de lightbox die ik vond was dat ze leken allemaal op een of de andere zware gewicht JAVASCRIPT frameworks zoals jQuery, Prototype, MooTools en dergelijke te gebruiken. Ze zijn allemaal koel en chic uit. Maar als uw eis is "maar ik wil een eenvoudig en licht LightBox SCRIPT voor mijn site", dan hier is het;
Enkele leuke features van deze lichttafel
- Zeer licht
een. 4KB van scripts, verpakt (8 kb uitgepakt)
b. 2 kb van CSS
c. Paar regels van HTML voor de lightbox container - Eenvoudig te begrijpen en te implementeren
- Kan meerdere Lichtbakken op dezelfde pagina.
- Dezelfde lightbox houder wordt gebruikt om aan te tonen verschillende inhoud (die afzonderlijk opgenomen verborgen gebieden in de pagina), afhankelijk van de koppeling / optie wordt geklikt.
- Automatisch centreert zich, rekening houdend met alle factoren, zoals, Window hoogte en breedte (schermresolutie), pagina scroll bedrag en de hoogte van de inhoud van de lightbox
- Getest in IE 7 en Firefox
Bekijk de demo |
Download Lightbox Bron Zip (gedownload 1804 keer)
Met behulp van de lightbox [Bestanden in het zip-bestand]
jo.js, jo_pack.js [verpakt version]: - een eenvoudige set van JavaScript-objecten [PB], die bevat element, window-en document positionering scripts. U opent JO.JS als u wenst om uw handen vuil met een aantal geavanceerde javascripting, het creëren van abstracte functies, de uitbreiding element eigenschappen en dergelijke. Als u niet te veel in javascripting, laat het met rust.
lightbox.js, lightbox_pack.js [boordevol version]: - Opnemen lichtbak manager scripts. Als u pagina ontwerper, tevens verantwoordelijk met de uitvoering van de lichtbak op de pagina, moet u de LightBoxManager te begrijpen. LightBoxManager bevat eigenlijk gewoon twee functies showLightBox en closeLightBox.
lightbox.css: - Als je weet dat CSS, kun je spelen met lightbox.css om de look-n-feel lightbox.css aanpassen
index.html: Voorbeeld uitvoering van de lichttafel met twee verschillende inhoud
lb_underlay_bkg.png: - Dit is een lichte / Simi transparante afbeelding die wordt gebruikt op de achtergrond voor de lightbox onderlaag [onderlaag is de laag onder de lighbox, die de gebruiker niet te klikken op een andere entiteit op de pagina, terwijl de lightbox is geopend]. U kunt elk beeld of een kleur hiervoor, afhankelijk van de pagina ontwerp en de eis.
icon_lb_close.gif: - Het beeld van nauwe lightbox handvat op de rechterbovenhoek van de lichtbak. Kan gebruik maken van een beeld als per ontwerp
Bekijk de demo |
Download Lightbox Bron Zip (gedownload 1804 keer)
Laat ons uw opmerkingen en feedback ...
