Skip to content

Commit cbe32e1

Browse files
defunktdefunkt
committed
Merge remote branch 'kneath/cssified'
Conflicts: LICENSE README.txt examples/css/example.css examples/images/logo.png examples/images/stairs.jpg examples/index.html examples/remote.html facebox.css src/facebox.js
2 parents 4978a19 + b0c38fa commit cbe32e1

19 files changed

+712
-144
lines changed

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Copyright (c) 2007, 2008 Chris Wanstrath
1+
Copyright (c) 2007-2010 Chris Wanstrath, Kyle Neath
22

33
Permission is hereby granted, free of charge, to any person obtaining
44
a copy of this software and associated documentation files (the

‎README.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Facebox
2+
3+
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.
4+
5+
[See it in action](http://defunkt.github.com/facebox/examples/).
6+
7+
![Sample Image](http://share.kyleneath.com/captures/Facebox_1.2-20100417-190352.jpg)
8+
9+
[Download the latest release](http://github.com/defunkt/facebox/zipball/master)
10+
11+
## Compatibility
12+
13+
This release relies on a lot of advanced CSS techniques (box-shadow, border-radius, RGBA). That being said, it's compatible with many browsers.
14+
15+
* **Safari 4**
16+
* **Webkit Nightlies** (Chromium, Chrome) as of 4/17/10
17+
* **Firefox 3.5**
18+
* **IE8** (degraded experience)
19+
* **IE7** (degraded experience)
20+
* IE6 - I just don't care
21+
* Opera - I just don't care
22+
23+
## Usage
24+
25+
Include jQuery, `src/facebox.js` and `src/facebox.css`. Then tell facebox where you've put `src/loading.gif` and `src/closelabel.png`
26+
27+
$.facebox.settings.closeImage = '/images/facebox/closelabel.png'
28+
$.facebox.settings.loadingImage = '/images/facebox/loading.gif'
29+
30+
Calling facebox() on any anchor tag will do the trick, it's easier to give your Faceboxy links a rel="facebox" and hit them all onDomReady.
31+
32+
jQuery(document).ready(function($) {
33+
$('a[rel*=facebox]').facebox()
34+
})
35+
36+
Any anchor links with `rel="facebox"` with now automatically use facebox:
37+
38+
<a href="#terms" rel="facebox">Terms</a>
39+
Loads the #terms div in the box
40+
41+
<a href="terms.html" rel="facebox">Terms</a>
42+
Loads the terms.html page in the box
43+
44+
<a href="terms.png" rel="facebox">Terms</a>
45+
Loads the terms.png image in the box
46+
47+
48+
### Using facebox programmatically
49+
50+
jQuery.facebox('some html')
51+
jQuery.facebox('some html', 'my-groovy-style')
52+
53+
The above will open a facebox with "some html" as the content.
54+
55+
jQuery.facebox(function($) {
56+
$.get('blah.html', function(data) { $.facebox(data) })
57+
})
58+
59+
The above will show a loading screen before the passed function is called,
60+
allowing for a better ajaxy experience.
61+
62+
The facebox function can also display an ajax page, an image, or the contents of a div:
63+
64+
jQuery.facebox({ ajax: 'remote.html' })
65+
jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
66+
jQuery.facebox({ image: 'stairs.jpg' })
67+
jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
68+
jQuery.facebox({ div: '#box' })
69+
jQuery.facebox({ div: '#box' }, 'my-groovy-style')
70+
71+
### Events
72+
73+
Want to close the facebox? Trigger the `close.facebox` document event:
74+
75+
jQuery(document).trigger('close.facebox')
76+
77+
Facebox also has a bunch of other hooks:
78+
79+
* `loading.facebox`
80+
* `beforeReveal.facebox`
81+
* `reveal.facebox` (aliased as `afterReveal.facebox`)
82+
* `init.facebox`
83+
84+
Simply bind a function to any of these hooks:
85+
86+
$(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })
87+
88+
### Customization
89+
90+
You can give the facebox container an extra class (to fine-tune the display of the facebox) with the facebox[.class] rel syntax.
91+
92+
<a href="remote.html" rel="facebox[.bolder]">text</a>
93+
94+
## Contact & Help
95+
96+
If you have questions, feel free to ask on the [Google Groups Mailing List](http://groups.google.com/group/facebox/). Alternatively if you find a bug, you can [open an issue](http://github.com/defunkt/facebox/issues).

‎README.txt

-8
This file was deleted.

‎b.png

-84 Bytes
Binary file not shown.

‎closelabel.gif

-979 Bytes
Binary file not shown.

‎examples/css/example.css

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
8+
background: #fff;
9+
color: #333;
10+
padding-bottom: 25px;
11+
}
12+
13+
a {
14+
color: #3B5998;
15+
text-decoration: none;
16+
}
17+
18+
a:hover {
19+
text-decoration: underline;
20+
}
21+
22+
p {
23+
font-size: 12px;
24+
margin: 10px 0;
25+
}
26+
27+
ul li {
28+
list-style: none;
29+
display: inline;
30+
}
31+
32+
li {
33+
padding: 2px 5px;
34+
}
35+
36+
.right {
37+
float: right;
38+
}
39+
40+
.amp {
41+
font-family: Georgia;
42+
}
43+
44+
#facebox .bolder {
45+
background: red;
46+
color: white;
47+
font-size: 20px;
48+
padding: 20px;
49+
width: 500px;
50+
}
51+
52+
textarea {
53+
height: 400px;
54+
width: 600px;
55+
}
56+
57+
#main {
58+
margin: 0 auto;
59+
width: 730px;
60+
}
61+
62+
#shadow {
63+
background: transparent url(/facebox/shadow.gif) repeat-y scroll right top;
64+
border-bottom: 1px solid #ddd;
65+
margin: 2px 0px 0px 1px;
66+
padding: 0;
67+
}
68+
69+
#content {
70+
border-color: #333 #B7B7B7 rgb(59, 89, 152);
71+
border-style: none solid solid;
72+
border-width: medium 1px 1px;
73+
margin: -2px 1px 0px -1px;
74+
padding: 20px;
75+
}
76+
77+
#logo {
78+
margin-bottom: 20px;
79+
text-align: center;
80+
}
81+
82+
.example {
83+
margin-bottom: 40px;
84+
}
85+
86+
.example h2 {
87+
border-bottom: 1px solid #D8DFEA;
88+
margin-bottom: 10px;
89+
font-size: 14px;
90+
padding: 0;
91+
margin: 0;
92+
}
93+
94+
.example ul li {
95+
font-size: 12px;
96+
}
97+
98+
.code {
99+
background: #F7F7F7;
100+
border-top: 1px solid #EBEBEB;
101+
border-bottom: 1px solid #EBEBEB;
102+
padding: 10px;
103+
}
104+
105+
.code h3 {
106+
font-size: 11px;
107+
}
108+
109+
.code code {
110+
margin: 10px 0;
111+
display: block;
112+
}
113+
114+
#screenshots a {
115+
border: none;
116+
}
117+
118+
#screenshots img {
119+
padding: 3px;
120+
border: 1px solid #ddd;
121+
background: #fff;
122+
}
123+
124+
#footer {
125+
padding: 8px 10px 0px;
126+
color: #777;
127+
line-height: 16px;
128+
font-size: 11px;
129+
}
130+
131+
#footer p {
132+
margin: 0;
133+
}

‎examples/images/logo.png

3.75 KB
Loading

‎examples/images/stairs.jpg

120 KB
Loading

0 commit comments

Comments
 (0)