You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

github.com/mirisuzanne/compass-css-lightbox

Package Overview
Dependencies
Alerts
File Explorer
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/mirisuzanne/compass-css-lightbox

v0.2.0
Source
Go
Version published
Created
Source

Compass CSS Lightbox

CSS-only lightboxes that work in Everything But IE. Degrades gracefully, with no effect on IE at all, so you can set fallback styles there and/or bootstrap it with Javascript.

Installation

From the command line:

sudo gem install css-lightbox

Add to a project (rails: compass.config, other: config.rb):

require 'css-lightbox'

Or create a new project:

compass -r css-lightbox -f css-lightbox project_directory

Lightboxes

Your HTML:

<div id="content">
  <!-- all your normal page content, with links to lightboxes: -->
  <a href="#about-us">a link to the about-us lightbox</a>
</div>

<div id="lightboxes">
  
  <!-- start lightbox -->
  <aside id="about-us">
    <div>
      <!-- Your Lightbox Content -->
      <a href="#" title="close the about lightbox">close</a>
    </div>
  </aside>
  <!-- end lightbox... repeat as needed... -->
  
</div>

The important part is that you have:

  • elements with an ID linked from the content (the aside above)
  • an inner element in each that will act as the box itself (the div above)
  • a link to # from each box, to close it

Your Scss:

// override these if you want
//
// // set to "true" for CSS3 transform fade-in/out
// // - bug in Chrome allows you to see fade-out on-load
// !lightbox-fade      ||= "false"
//
// // set to your box element
// // or false to set the box styles on your own (see below)
// !lightbox-box       ||= "> div"

// import lightboxes
@import "css-lightbox";

// make it happen (assuming lightbox.html markup)
#lightboxes aside {
  @include css-lightbox;

  // add styles for IE
  // properties: values

  // override box styles
  // &:not(:target), &:target
  //   > div
  //     properties: values

}

FAQs

Package last updated on 20 Apr 2010

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts