Einfache, leichte, Cross-Browser-Leuchtkasten für Ihre Webseite
Nicht, dass es nur ein paar LIGHTBOX die, mit dem Sie, wenn Sie Google können. Das Problem mit den meisten der Leuchtkästen, dass ich fand, war, dass sie alle schienen eine oder andere schwere JavaScript-Frameworks wie jQuery, Prototype, MooTools und Ähnliches verwenden. Sie sind alle cool und protzigen suchen. Aber wenn Ihre Forderung ist "aber ich will eine einfache und leichte LIGHTBOX SCRIPT für meine Homepage", dann ist es hier;
Einige nette Features dieses Leuchtkastens
- Sehr leicht
ein. 4kb von Scripts, wenn gepackt (8 KB entpackt)
b. 2 kb von CSS
c. Nur wenige Zeilen HTML-Container für die lightbox - Einfach zu verstehen und umzusetzen
- Können mehrere Leuchtkästen auf der gleichen Seite haben.
- Das gleiche Leuchtkasten Behälter verwendet wird für verschiedene Inhalte (die separat als verborgenen Bereiche in der Seite enthalten), abhängig von der Verbindung / Option, die angeklickt wird.
- Zentriert sich automatisch, unter Berücksichtigung aller Faktoren wie, Fensterhöhe und-breite (Bildschirmauflösung), Seite blättern Betrag und der Höhe der Inhalt der Lightbox
- Getestet in IE 7 & FF
Demo anzeigen |
Laden Sie Zip Leuchtkasten Quelle (Heruntergeladene 1779 mal)
Mit dem Leuchttisch [Dateien im ZIP-Datei]
jo.js, jo_pack.js [gepackte Version]: - ein einfacher Satz von JavaScript-Objekten [JO], das Element, Fenster-und Dokumenten-Positionierung Skripte. Sie können JO.JS öffnen, wenn Sie sich die Hände schmutzig mit einigen fortgeschrittenen JavaScripting, die Schaffung abstrakter Funktionen wünschen, der sich Element-Eigenschaften und so. Wenn Sie nicht zu viel in JavaScripting, lassen sie allein.
lightbox.js, lightbox_pack.js [gepackte Version]: - Enthalten Licht Box Manager Skripte. Wenn Sie Seiten Designer, auch verantwortlich mit der Umsetzung der Lightbox auf der Seite sind, müssen Sie die LightBoxManager verstehen. LightBoxManager enthält im Grunde nur zwei Funktionen showLightBox und closeLightBox.
lightbox.css: - Wenn Sie wissen, CSS, spielen Sie herum kann mit lightbox.css um den Look-n-Gefühl lightbox.css anpassen
index.html: Beispiel für Umsetzung der Lightbox mit zwei verschiedenen Inhalten
lb_underlay_bkg.png: - Dies ist Licht / Simi transparentes Bild, das den Hintergrund für den Leuchtkasten Unterlage verwendet wird [Unterlage ist die Schicht unterhalb der lighbox, die der Benutzer daran gehindert Maustaste auf eine beliebige andere Stelle auf der Seite, während der Lightbox geöffnet ist]. Sie können jedes Bild oder gar eine feste Farbe für diesen Zweck zu verwenden, abhängig von der Seiten-Design und der Anforderung.
icon_lb_close.gif: - Das Bild für ein automatisches System Griff an der oberen rechten Ecke des Licht-Box. Können jedes Bild als pro-Design verwenden
Demo anzeigen |
Laden Sie Zip Leuchtkasten Quelle (Heruntergeladene 1779 mal)
Bitte lassen Sie uns Ihre Kommentare und Rückmeldungen ...
