--------------------------------------------------------------------------------
/stylesheets/_css-lightbox.scss:
--------------------------------------------------------------------------------
1 | // CSS-Lightboxes ------------------------------------------------------------
2 | // Plugin by Eric Meyer - http://eric.oddbird.net/
3 |
4 | // These lightboxes work in all modern standards-complient browsers with
5 | // pure CSS. Additional support for Internet Explorer and older browsers
6 | // is made possible with a small amount of JavaScript.
7 |
8 |
9 | // Defaults ------------------------------------------------------------------
10 |
11 | // Every lightbox includes an outer container and an inner box
12 | // Set this to a selector for that box.
13 | $lightbox-box-to-style : "> div" !default;
14 |
15 | // Set the default fade time, or leave false for no fade
16 | $lightbox-fade : false !default;
17 |
18 | // Set the active selector to be used by the JS fallback
19 | $lightbox-active : ".active" !default;
20 |
21 | // Import --------------------------------------------------------------------
22 | @import "css-lightbox/lightbox";
23 |
--------------------------------------------------------------------------------
/templates/project/lightbox.js:
--------------------------------------------------------------------------------
1 | //** CSS-Lightboxes **//
2 |
3 | // Settings ------------------------------------------------------------------
4 | // Edit these settings to match your lightbox HTML code. These will act as
5 | // defaults, which you can override per application as needed:
6 |
7 | var lightboxes = $('#lightboxes aside');
8 | var closeLinks = $('#lightboxes a[title*="close"]');
9 | var showClass = 'active'
10 | var hideClass = 'hidden'
11 |
12 | // Function ------------------------------------------------------------------
13 | // Call this function to implement lightbox bootstrapping
14 | // on any given lightboxes:
15 |
16 | function lightboxBootstrap(boxes, close, sClass, hClass) {
17 |
18 | $(boxes).not('.' + sClass).addClass(hClass);
19 |
20 | function lightboxClose(lightbox) {
21 | $(lightbox).removeClass(sClass).addClass(hClass);
22 | }
23 |
24 | function lightboxOpen(lightbox) {
25 | $(boxes).removeClass(sClass).addClass(hClass);
26 | $(lightbox).removeClass(hClass).addClass(sClass);
27 | }
28 |
29 | boxes.each(function() {
30 | $('a[href="#' + $(this).attr('id') + '"]').click(function() {
31 | lightboxOpen($(this).attr('href'));
32 | return false;
33 | });
34 | });
35 |
36 | closeLinks.click(function() {
37 | lightboxClose($(this).parents(boxes));
38 | return false;
39 | });
40 | }
41 |
42 | // Application ---------------------------------------------------------------
43 | $(document).ready(function(){
44 | lightboxBootstrap(lightboxes, closeLinks, showClass, hideClass);
45 | });
46 |
--------------------------------------------------------------------------------
/stylesheets/css-lightbox/_lightbox.scss:
--------------------------------------------------------------------------------
1 | //** CSS-Lightboxes **//
2 |
3 | @import "compass/reset/utilities";
4 | @import "compass/css3/opacity";
5 | @import "compass/css3/box-shadow";
6 | @import "compass/css3/transition";
7 |
8 | // Lightbox Basics -----------------------------------------------------------
9 |
10 | // Sets a lightbox as hidden
11 | @mixin lightbox-hidden {
12 | @include reset-box-model;
13 | @include transparent;
14 | position: absolute;
15 | top: 0;
16 | right: 0;
17 | bottom: 0;
18 | left: 0;
19 | display: block;
20 | z-index: -1;
21 | }
22 |
23 | // Sets a lightbox as active
24 | @mixin lightbox-active {
25 | @include opaque;
26 | z-index: 999;
27 | }
28 |
29 | // Initiallizes lightbox styles, and hides them to be revealed later
30 | @mixin lightbox-hide {
31 | @include lightbox-hidden;
32 | }
33 |
34 | // Shows a lightbox when it should be active
35 | @mixin lightbox-show(
36 | $active: $lightbox-active
37 | ) {
38 | &:target {
39 | @include lightbox-active;
40 | }
41 | @if $active {
42 | &#{$active} {
43 | @include lightbox-active;
44 | }
45 | }
46 | }
47 |
48 | // Set up your lightboxes by applying to each container
49 | @mixin lightbox(
50 | $active: $lightbox-active
51 | ) {
52 | @include lightbox-hide;
53 | @include lightbox-show($active);
54 | }
55 |
56 | // Default Lightboxing ------------------------------------------------------
57 |
58 | // Set a lightbox to fade
59 | @mixin lightbox-fade(
60 | $fade-speed: $lightbox-fade
61 | ) {
62 | @if not $fade-speed {
63 | $fade-speed: 500ms;
64 | }
65 | @include transition(opacity $fade-speed, z-index $fade-speed);
66 | }
67 |
68 | // Styles the lightbox container
69 | @mixin lightbox-default-container-styles(
70 | $fade-speed: $lightbox-fade
71 | ) {
72 | background: rgba(#000,.125);
73 | @if $fade-speed {
74 | @include lightbox-fade($fade-speed);
75 | }
76 | }
77 |
78 | // Styles the lightbox box
79 | @mixin lightbox-default-box-styles {
80 | @include single-box-shadow(rgba(0, 0, 0, 0.9), 0, 0, 1em);
81 | position: relative;
82 | margin: 3em auto;
83 | padding: 1.5em;
84 | width: 32em;
85 | border: 1em solid;
86 | background: white;
87 | text-align: left;
88 | }
89 |
90 | // Style the container and box in one fell swoop
91 | @mixin lightbox-default-styles(
92 | $style : $lightbox-box-to-style,
93 | $fade-speed : $lightbox-fade
94 | ) {
95 | @include lightbox-default-container-styles($fade-speed);
96 | @if $style {
97 | #{$style} {
98 | @include lightbox-default-box-styles;
99 | }
100 | }
101 | }
102 |
103 | // Create and style a lightbox all at once
104 | @mixin lightbox-with-default-styles(
105 | $style : $lightbox-box-to-style,
106 | $fade-speed : $lightbox-fade,
107 | $active : $lightbox-active
108 | ) {
109 | @include lightbox($active);
110 | @include lightbox-default-styles($style,$fade-speed);
111 | }
112 |
--------------------------------------------------------------------------------
/README.mkdn:
--------------------------------------------------------------------------------
1 | Compass CSS Lightbox
2 | ====================
3 |
4 | These lightboxes work in all modern browsers with pure CSS. Additional support
5 | for Internet Explorer and older browsers is made possible with a small amount
6 | of JavaScript.
7 |
8 |
9 | Installation
10 | ============
11 |
12 | From the command line:
13 |
14 | (sudo) gem install css-lightbox --pre
15 |
16 | Add to a project:
17 |
18 | // rails: compass.config, other: config.rb
19 | require 'css-lightbox'
20 |
21 | // command line
22 | compass install css-lightbox
23 |
24 | Or create a new project:
25 |
26 | compass -r css-lightbox -f css-lightbox project_directory
27 |
28 |
29 | Lightboxes
30 | ==========
31 |
32 | The basic CSS-Lightbox works with a combination of internal links, z-index,
33 | positioning and the css3 `:target` selector. Javascript bootstrapping simply
34 | interupts the link action, and applys active or inactive classes to the
35 | boxes.
36 |
37 | Each lightbox contains three important elements:
38 |
39 | - Container
40 | - Box
41 | - Link to close the box (href="#")
42 |
43 | The container gives you extra positioning options, and acts as an optional
44 | modal overlay for the page. You can write the HTML to your liking, but here is
45 | one example:
46 |
47 |
55 |
56 | To open your lightbox, all you need is a link from somewhere else on the page
57 | that points at your lightbox:
58 |
59 | a link to the about-us lightbox
60 |
61 | For a quick, pre-styled lightbox simply apply the `lightbox-with-default-styles`
62 | mixin to your lightbox containers.
63 |
64 | .container {
65 | @include lightbox-with-default-styles;
66 | }
67 |
68 | `lightbox-with-default-styles` takes three optional arguments, each with
69 | defaults that you can override globaly for your project.
70 |
71 | * The first argument is a (relative) selector for the box, and defaults
72 | to `"> div"`.
73 | * The second is a fade-speed using CSS transitions. This defaults to `false`
74 | for no fade.
75 | * The third defines the JS fallback "active" selector that you are using.
76 | It defaults to `.active`.
77 |
78 | Use them like so:
79 |
80 | .container {
81 | @include lightbox-with-default-styles('> div', '300ms', '.visible');
82 | }
83 |
84 |
85 | Javascript Bootstrapping
86 | ========================
87 |
88 | For Javascript bootstrapping in IE (using jQuery), simply link the included
89 | lightbox.js and make any needed changes to the HTML-related variables that it
90 | uses:
91 |
92 | // "lightboxes" should point to the lightbox containers on your page
93 | var lightboxes = $('#lightboxes aside');
94 |
95 | // "closeLinks" should point at the links used to close boxes
96 | var closeLinks = $('#lightboxes a[title*="close"]');
97 |
98 | // "showClass" is the class to use for active lightboxes
99 | // "hideClass" is used for inactive lightboxes
100 | var showClass = 'active'
101 | var hideClass = 'hidden'
102 |
103 | The function is called simply, and the variables can be overridden on each call
104 | as needed:
105 |
106 | $(document).ready(function(){
107 | lightboxBootstrap(lightboxes, closeLinks, showClass, hideClass);
108 | });
109 |
110 |
111 | Advanced Lightboxes
112 | ===================
113 |
114 | But why would you use my styles when you can create your own? For simple
115 | lightboxes without any styling at all, you can use the simple `lightbox` mixin:
116 |
117 | .container {
118 | @include lightbox;
119 | }
120 |
121 | I'll warn you, it's ugly until you add some style, but adding style isn't hard.
122 | By default `absolute` positioning is used on the containers to place them in
123 | the top left. You can override that by changing the positioning of your
124 | container as you like. You'll find that each solution has advantages and
125 | disadvantages.
126 |
127 |
128 | Available Defaults and Mixins
129 | =============================
130 |
131 | Defaults:
132 |
133 | // Set this to a selector for the inner box.
134 | $lightbox-box-to-style: "> div";
135 |
136 | // Set the default fade time, or leave false for no fade
137 | $lightbox-fade: false;
138 |
139 | // Set the active selector to be used by the JS fallback
140 | $lightbox-active: ".active";
141 |
142 | Mixins:
143 |
144 | * What makes a lightbox inactive
145 |
146 | lightbox-hidden();
147 |
148 | * What makes a lightbox active
149 |
150 | lightbox-active();
151 |
152 | * Initiallizes lightbox styles, and hides them to be revealed later
153 |
154 | lightbox-hide();
155 |
156 | * Shows a lightbox when it should be active
157 |
158 | lightbox-show(
159 | $active: $lightbox-active );
160 |
161 | * Set up your lightboxes by applying to each container
162 |
163 | lightbox(
164 | $active: $lightbox-active );
165 |
166 | * Set a lightbox to fade
167 |
168 | lightbox-fade(
169 | $fade-speed: $lightbox-fade or 500ms );
170 |
171 | * Apply default styles to the lightbox container
172 |
173 | lightbox-default-container-styles(
174 | $fade-speed: $lightbox-fade );
175 |
176 | * Apply default styles to the box
177 |
178 | lightbox-default-box-styles();
179 |
180 | * Apply default styles to the container and box in one fell swoop
181 |
182 | lightbox-default-styles(
183 | $style : $lightbox-box-to-style,
184 | $fade-speed : $lightbox-fade );
185 |
186 | * Create and style a lightbox all at once
187 |
188 | lightbox-with-default-styles(
189 | $style : $lightbox-box-to-style,
190 | $fade-speed : $lightbox-fade,
191 | $active : $lightbox-active );
192 |
--------------------------------------------------------------------------------