├── .gitignore ├── README.mkdn ├── css-lightbox.gemspec ├── lib └── css-lightbox.rb ├── stylesheets ├── _css-lightbox.scss └── css-lightbox │ └── _lightbox.scss └── templates └── project ├── _lightbox.scss ├── lightbox.html ├── lightbox.js └── manifest.rb /.gitignore: -------------------------------------------------------------------------------- 1 | css-lightbox-*.gem 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /css-lightbox.gemspec: -------------------------------------------------------------------------------- 1 | Gem::Specification.new do |s| 2 | # Release Specific Information 3 | s.version = "0.3.beta.2" 4 | s.date = "2011-03-18" 5 | 6 | # Gem Details 7 | s.name = "css-lightbox" 8 | s.authors = ["Eric Meyer"] 9 | s.summary = %q{a css-only lightbox implementation for compass} 10 | s.description = %q{a css-only lightbox implementation for compass} 11 | s.email = "eric@oddbird.net" 12 | s.homepage = "http://www.oddbird.net/" 13 | 14 | # Gem Files 15 | s.files = %w(README.mkdn) 16 | s.files += Dir.glob("lib/**/*.*") 17 | s.files += Dir.glob("stylesheets/**/*.*") 18 | s.files += Dir.glob("templates/**/*.*") 19 | 20 | # Gem Bookkeeping 21 | s.rubygems_version = %q{1.3.6} 22 | s.add_dependency("compass", [">= 0.11"]) 23 | end 24 | 25 | -------------------------------------------------------------------------------- /lib/css-lightbox.rb: -------------------------------------------------------------------------------- 1 | Compass::Frameworks.register("css-lightbox", :path => "#{File.dirname(__FILE__)}/..") -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /templates/project/_lightbox.scss: -------------------------------------------------------------------------------- 1 | //** CSS-Lightboxes **// 2 | 3 | // Import ------------------------------------------------------------------ 4 | 5 | @import "css-lightbox"; 6 | 7 | /* Lightboxes --------------------------------------------------------------*/ 8 | 9 | // Based on the lightbox.html template provided: 10 | #lightboxes aside { 11 | @include lightbox-with-default-styles("> div", 300ms); 12 | } 13 | -------------------------------------------------------------------------------- /templates/project/lightbox.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | a link to the about-us lightbox 4 |
5 | 6 |
7 | 8 | 17 | 18 | 24 | 25 | 26 | 27 |
-------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /templates/project/manifest.rb: -------------------------------------------------------------------------------- 1 | # Make sure you list all the project template files here in the manifest. 2 | stylesheet '_lightbox.scss', :media => 'screen, projection' 3 | html 'lightbox.html' 4 | javascript 'lightbox.js' 5 | 6 | description "css-only lightboxes with optional javascript bootstrapping." 7 | 8 | help %Q{ 9 | Installs some html, a stylesheet partial, and javascript bootstrapping that 10 | you can use directly or refer to as an example. 11 | } 12 | 13 | welcome_message %Q{ 14 | Please refer to the lightbox.html file to see how the markup should be 15 | structured, the lightbox stylesheet partial to see how to use the library and 16 | apply it to your markup, and the lightbox.js script to see how 17 | bootstrapping works. 18 | } 19 | 20 | --------------------------------------------------------------------------------