Skip to content
a jQuery lightbox plugin focusing on usability
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.markdown
kratsbox.css
kratsbox.js
kratsbox.light.css

README.markdown

Kratsbox

A simple lightbox-like jQuery plugin focusing on usability. What makes kratsbox different from other lightboxes is:

  • Keyboard focus. The close, next and prev actions get visible focus, and when kratsbox is closed, focus returns to the right link.

  • Only images. While not an feature in itself, lack of support for embeddly, iframes or ajax does allow the small size of kratsbox.

  • No extra loading. The graphics in kratsbox is pure css3, no extra images / sprites.

Usage

First, put the kratsbox file in some path on your web server and make sure you have them (and jQuery) availiable in the page:

<link rel="stylesheet" type="text/css" href="/somepath/kratsbox.css"/>
<script type="text/javascript" src="/somepath/jquery.js"></script>
<script type="text/javascript" src="/somepath/kratsbox.js"></script>

You can (and should) combine and minify them with your other javascript and css files to minimize impact on page load time. If you prefer a white box over a gray, you can use kratsbox.light.css instead of kratsbox.css.

Basic usage is just to jQuery-select the links you want to use the box on and call kratsbox, like so:

$('a.image').kratsbox();

As usual, you need to execute that after the links actually exist. You also might want to set some options, e.g. for localization.

$(function() {
  $('a.image').kratsbox({
    'next': 'nästa \u2192',
    'prev': 'förra \u2190',
    'close': 'stäng \u00D7'
  });
});

This assumes you have image links. I usually do something like:

<a class="image" href="large-image.jpg"
   title="Wild rose beside a road in Stockholm. Cc-by Rasmus Kaj">
 <img src="small-image.jpg" width="200" height="133"
      alt="Image: A flower">
</a>

This makes the small image visible directly in the page, and clicking it brings up a box displaying the large image. The title attribute from the link describes what is linked to and is used as a caption when showing the large image. Img alts saying it's an image is sometimes frowned upon, but I tink it is good when considered it is the link text for the larger version of the image.

Kratsbox also supports the figure / figcaption elements, where figcaption may contain markup. Depending on your stylesheet, the figcaption may be visible for the small image as well as in the box with the large image.

<figure>
  <a href="large-image.jpg">
    <img src="small-image.jpg" width="200" height="133"
         alt="Image: A flower">
  </a>
  <figcaption>
    Wild rose beside a road in Stockholm.
    Cc-by <a href="http://rasmus.krats.se/">Rasmus Kaj</a>.
  </figcaption>
</figure>

Options

  • next - Text for the link to the next image.
  • prev - Text for the link to the previous image.
  • close - Text for the close button.
  • minsize - If the browser window is less tall or less wide than this, kratsbox functionality will be disabled.
You can’t perform that action at this time.