Design

The plugin comes along with a style sheet, which provides a basic design. This page explains how you can tailor it to your specific needs.

Plugin CSS

Download style sheet

You may download the style sheet in two versions, then overwrite it within your own styles to cover your needs:

Flexible class names

You may want to change the class names (see class name setting) of all CSS classes that are used for the Plugin markup. In case you change a name, you will also need to change the class name in style sheet provided above, or define your own styles.

General styles

The .clearfix is necessary in case the thumbnails of the index module use the float layout. As soon as one of the modules is visible, the body tag will have the .sl-active class in order to hide additional, scrollable page content. The .sl-container holds the whole plugin markup, namely the index and lightbox module, which are discussed next.

.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

.sl-active {
  overflow: hidden;
}

.sl-container {
  z-index: 10000;
}

Index module styles

The index module creates several div containers, which are explained below.

overlay

The .sl-index-overlay is created, when the overlay attribute of the index module has been enabled. The default setting uses opacity to slightly show the contents of the page below (giving it a lightbox-like behavior).

.sl-index-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.9;
  z-index: 1000;
  display: none;
}

Example: Opacity and background color

You might want to provide a light-grey background and remove the opacity by using the following CSS markup:

.sl-index-overlay {
  background: #ccc;
  opacity: 1;
}

wrapper

The wrapper div .sl-index-wrapper is used to hold the whole markup of the index module. It also displays a close cursor.

.sl-index-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1100;
  cursor: url('cursors/black/cursor-close.png'), url('cursors/black/cursor-close.cur'), crosshair;
  display: none;
}

Example: Own close cursor

You might want to use your own close cursor, which can be done easily be reassigning the cursor attribute:

.sl-index-wrapper {
  cursor: url('cursors/my-cursor-close.png'), url('cursors/my-cursor-close.cur'), crosshair;
}

Attention: You will also need to provide a retina version of the close cursor. Otherwise the one from the Plugin's style sheet will be used on high-resolution devices.

decks container

The .sl-index-decks-container holds the various decks that you have specified. It defines the margin from the browser window to its contents with 50px by default.

.sl-index-decks-container {
  position: absolute;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
}

.sl-index-decks-container::-webkit-scrollbar {
    display: none;
}

Example: Change the margins

You might want to change the margins to the page, let's say to 20px on every side (see below). This is exactly what is done on default for mobile devices (see responsive queries below):

.sl-index-decks-container {
  top: 20px; left: 20px; right: 20px; bottom: 20px;
}

deck

Every deck .sl-index-deck is positioned absolute to fill out the whole index decks container. In case you use a masonry layout, the deck should be positioned horizontally centered. This is done via the second style definition below:

.sl-index-deck {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.sl-index-deck.masonry {
  margin: 0 auto;
}

item

Each .sl-index-item — that is the thumbnail (container) that you see in the index module — is floated and has a margin as seen below. It uses an indicator, which is hidden, once the thumbnail has been loaded.

.sl-index-item {
  position: relative;
  float: left;
  margin: 0 15px 40px 15px;
  cursor: pointer;
}

.sl-index-item-indicator {
  position: relative;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: url('cursors/black/loader.gif') top left no-repeat;
  background-size: 16px 16px;
  z-index: 1000;
}

.lt-ie9 .sl-index-item-indicator {
  background: url('cursors/black/loader-small.gif') top left no-repeat;
}

Example: Own loading icon

For example you might want to use your own loading icon (e.g. 40x40 pixel, retina optimized), so you would need to overwrite those styles with the following:

/* using a 40x40 pixel loader icon, therefore
   we also need to position it centered */
.sl-index-item-indicator {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: url('cursors/my-loader.gif') top left no-repeat;
  background-size: 20px 20px;
}

/* 20x20 pixel fall back for below IE9, as it does
   not support background-size attribute */
.lt-ie9 .sl-index-item-indicator {
  background: url('cursors/my-loader-small.gif') top left no-repeat;
}

item overlay

Each thumbnail item (container) may have an overlay .sl-index-item-overlay that is displayed, once a user hovers over a thumbnail. This can be deactivated via the thumbnail overlay setting. This overlay is however hidden by default for touch devices (which do not have a mouse device).

.sl-index-item-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
  opacity: 0.7;
  display: none;
}

.sl-index-item:hover .sl-index-item-overlay {
  display: block;
}

.touch .sl-index-item:hover .sl-index-item-overlay {
  display: none !important;
}

Example: Opacity and color

For example you might want to change the opacity and color of the item overlay:

.sl-index-item-overlay {
  background: #fff;
  opacity: 0.85;
}

item img

The .sl-index-item-img holds the image of the thumbnail (container). It needs absolute positioning and the img is hidden by default, and will be displayed, once it has been loaded.

.sl-index-item-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sl-index-item-img img {
  width: 100%;
  height: 100%;
  display: none;
}

.csstransitions .sl-index-item-img img {
  display: block;
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
     -moz-transition: opacity 250ms ease;
      -ms-transition: opacity 250ms ease;
       -o-transition: opacity 250ms ease;
          transition: opacity 250ms ease;
}

.csstransitions .sl-index-item-img img.loaded {
  opacity: 1;
}

item caption

The .sl-index-item-caption is the caption container for the index item. It has additional style definitions for the various caption positioning options.

.sl-index-item-caption {
  position: absolute;
  width: 100%;
  text-align: center;
}

.sl-index-item-caption.top {
  top: 0;
}

.sl-index-item-caption.center {
  top: 50%;
}

.sl-index-item-caption.bottom {
  bottom: 0;
}

.sl-index-item-caption-inner {
  padding: 0 10px;
}

Example: Change caption font and color

Depending on how you set the styles of the rest of your website, you might want to define how index captions look, by specifying a font family and color:

.sl-index-item-caption {
  font-family: "MyFont";
  color: #555;
}

Lightbox module styles

The lightbox module creates several div containers, which are explained below.

overlay

Similar to the index overlay style explained above, the .sl-lightbox-overlay is created, when the overlay attribute of the lightbox module has been enabled. The default setting uses opacity to slightly show the contents of the page below (giving it a lightbox-like behavior).

.sl-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.8;
  z-index: 1000;
  display: none;
}

Example: Opacity and background color

You might want to provide a light-grey background and remove the opacity by using the following CSS markup:

.sl-lightbox-overlay {
  background: #ccc;
  opacity: 1;
}

wrapper

Similar to the index wrapper style explained above, the wrapper div .sl-lightbox-wrapper is used to hold the whole markup of the lightbox module. It also displays a close cursor.

.sl-lightbox-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1100;
  cursor: url('cursors/black/cursor-close.png'), url('cursors/black/cursor-close.cur'), crosshair;
  display: none;
}

Example: Own close cursor

You might want to use your own close cursor, which can be done easily be reassigning the cursor attribute:

.sl-lightbox-wrapper {
  cursor: url('cursors/my-cursor-close.png'), url('cursors/my-cursor-close.cur'), crosshair;
}

Attention: You will also need to provide a retina version of the close cursor. Otherwise the one from the Plugin's style sheet will be used on high-resolution devices.

decks container

The .sl-lightbox-decks-container holds the various decks that you have specified. Depending on the currently displayed lightbox image, it will then be repositioned by the Plugin's internal Javascript code:

.sl-lightbox-decks-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1100;
  cursor: none;
}

.csstransitions .sl-lightbox-decks-container {
  width: 0;
  height: 0;
  margin-left: 0;
  margin-top: 0;

  -webkit-transition: all 250ms ease;
     -moz-transition: all 250ms ease;
      -ms-transition: all 250ms ease;
       -o-transition: all 250ms ease;
          transition: all 250ms ease;
}

deck

Every deck .sl-lightbox-deck is positioned absolute to fill out the whole lightbox decks container.

.sl-lightbox-deck {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

item

Each .sl-lightbox-item holds an image — the lightbox image that you actually see. It uses an indicator, which is hidden, once the lightbox image has been loaded.

.sl-lightbox-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.sl-lightbox-item img {
  width: 100%;
  height: 100%;
  display: none;
}

.csstransitions .sl-lightbox-item img {
  display: block;
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
     -moz-transition: opacity 250ms ease;
      -ms-transition: opacity 250ms ease;
       -o-transition: opacity 250ms ease;
          transition: opacity 250ms ease;
}

.csstransitions .sl-lightbox-item img.loaded {
  opacity: 1;
}

.sl-lightbox-item-indicator {
  position: relative;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: url('cursors/black/loader.gif') top left no-repeat;
  background-size: 16px 16px;
  z-index: 1000;
}

.lt-ie9 .sl-lightbox-item-indicator {
  background: url('cursors/black/loader-small.gif') top left no-repeat;
}

Example: Own loading icon

For example you might want to use your own loading icon (e.g. 40x40 pixel, retina optimized), so you would need to overwrite those styles with the following:

/* using a 40x40 pixel loader icon, therefore
   we also need to position it centered */
.sl-lightbox-item-indicator {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background: url('cursors/my-loader.gif') top left no-repeat;
  background-size: 20px 20px;
}

/* 20x20 pixel fall back for below IE9, as it does
   not support background-size attribute */
.lt-ie9 .sl-lightbox-item-indicator {
  background: url('cursors/my-loader-small.gif') top left no-repeat;
}

caption

The lightbox module features three captions (see captionLeft, captionCenter and captionRight for configuration options) which are wrapped in a container. It has additional style definitions for the various caption positioning options.

.sl-lightbox-caption-container {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 100;
  display: none;
}

.sl-lightbox-caption-container.top {
  top: 0;
}

.sl-lightbox-caption-container.center {
  top: 50%;
}

.sl-lightbox-caption-container.bottom {
  bottom: 0;
}

.sl-lightbox-caption-container .left {
  position: absolute;
  left: 0;
  text-align: left;
}

.sl-lightbox-caption-container .center {
  position: absolute;
  left: 15%;
  width: 70%;
  text-align: center;
}

.sl-lightbox-caption-container .right {
  position: absolute;
  right: 0;
  text-align: right;
}

.sl-lightbox-caption-container .left,
.sl-lightbox-caption-container .center,
.sl-lightbox-caption-container .right {
  overflow-y: scroll;
  -ms-overflow-style: none;
}

.sl-lightbox-caption-container .left::-webkit-scrollbar,
.sl-lightbox-caption-container .center::-webkit-scrollbar,
.sl-lightbox-caption-container .right::-webkit-scrollbar {
  display: none;
}

.lt-ie10 .sl-lightbox-caption-container .left,
.lt-ie10 .sl-lightbox-caption-container .center,
.lt-ie10 .sl-lightbox-caption-container .right {
  overflow-y: hidden;
}

.sl-lightbox-caption-container a,
.sl-lightbox-caption-container a:visited {
  color: #000;
  text-decoration: none;
  margin-bottom: 2px;
}

.sl-lightbox-caption-container a:hover {
  border-bottom: 1px solid #000;
}

Example: Change caption font and color as well as links

You might want to define, how the lightbox captions and links look, by specifying:

.sl-lightbox-caption-container {
  color: #000;
}

.sl-lightbox-caption-container a,
.sl-lightbox-caption-container a:visited {
  color: #000;
}

.sl-lightbox-caption-container a:hover {
  border: 0;
  color: #D9D9D9;
}

cursors

The .sl-lightbox-cursor cursor styles, define the cursors which are used, when hovering over the lightbox in order to navigate left or right (this invokes the prev or next method). You can disable those cursors on the lightbox through the clicks setting.

.sl-lightbox-cursor {
  position: absolute;
  background: url('cursors/black/blank.gif') 0 0 repeat;
  z-index: 50;
}

.sl-lightbox-cursor.left {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  cursor: url('cursors/black/cursor-left.png'), url('cursors/black/cursor-left.cur'), w-resize;
}

.sl-lightbox-cursor.right {
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  cursor: url('cursors/black/cursor-right.png'), url('cursors/black/cursor-right.cur'), e-resize;
}

Example: Change left and right arrow cursors

You might want to use your own arrows as cursors by specifying:

.sl-lightbox-cursor.left {
  cursor: url('cursors/my-cursor-left.png'), url('cursors/my-cursor-left.cur'), w-resize;
}

.sl-lightbox-cursor.right {
  cursor: url('cursors/my-cursor-right.png'), url('cursors/my-cursor-right.cur'), e-resize;
}

Attention: You will also need to provide a retina version of your left and right arrow cursors. Otherwise the ones from the Plugin's style sheet will be used on high-resolution devices.

Responsive queries

The following styles are used to optimize the design for mobile devices by reducing the margin on the .sl-index-decks-container and providing retina cursors for the index module and lightbox module.

/* responsive queries */
@media (max-width: 400px) {

  .sl-index-decks-container {
    top: 20px;
    left: 0;
    right: 0;
    bottom: 20px;
  }

}

/* retina optimization */
@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

  .sl-index-wrapper,
  .sl-lightbox-wrapper {
    cursor: url('cursors/black/cursor-close-retina.png'), crosshair;
  }

  .sl-lightbox-cursor.left {
    cursor: url('cursors/black/cursor-left-retina.png'), w-resize;
  }
  .sl-lightbox-cursor.right {
    cursor: url('cursors/black/cursor-right-retina.png'), e-resize;
  }

}

Example: Change retina cursors

You might want to use your own retina arrows and close icons as cursors by specifying:

@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

  .sl-index-wrapper,
  .sl-lightbox-wrapper {
    cursor: url('cursors/my-cursor-close-retina.png'), crosshair;
  }

  .sl-lightbox-cursor.left {
    cursor: url('cursors/my-cursor-left-retina.png'), w-resize;
  }
  .sl-lightbox-cursor.right {
    cursor: url('cursors/my-cursor-right-retina.png'), e-resize;
  }

}

Cursor icons

Provided cursors

The plugin comes along with two sets of cursor icons (black and white), which you can download here. The default style sheet uses the black cursors. In case you want to use white cursors, you will need to overwrite the Plugin styles within your own definitions:

/* index module */
.sl-index-wrapper {
  cursor: url('cursors/white/cursor-close.png'), url('cursors/white/cursor-close.cur'), crosshair;
}

.sl-index-item-indicator {
  background: url('cursors/white/loader.gif') top left no-repeat;
  background-size: 16px 16px;
}

.lt-ie9 .sl-index-item-indicator {
  background: url('cursors/white/loader-small.gif') top left no-repeat;
}

/* lightbox module */
.sl-lightbox-wrapper {
  cursor: url('cursors/white/cursor-close.png'), url('cursors/white/cursor-close.cur'), crosshair;
}

.sl-lightbox-item-indicator {
  background: url('cursors/white/loader.gif') top left no-repeat;
  background-size: 16px 16px;
}

.lt-ie9 .sl-lightbox-item-indicator {
  background: url('cursors/white/loader-small.gif') top left no-repeat;
}

.sl-lightbox-cursor {
  background: url('cursors/white/blank.gif') 0 0 repeat;
}

.sl-lightbox-cursor.left {
  cursor: url('cursors/white/cursor-left.png'), url('cursors/white/cursor-left.cur'), w-resize;
}

.sl-lightbox-cursor.right {
  cursor: url('cursors/white/cursor-right.png'), url('cursors/white/cursor-right.cur'), e-resize;
}

/* retina optimization */
@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

  .sl-index-wrapper,
  .sl-lightbox-wrapper {
    cursor: url('cursors/white/cursor-close-retina.png'), crosshair;
  }

  .sl-lightbox-cursor.left {
    cursor: url('cursors/white/cursor-left-retina.png'), w-resize;
  }
  .sl-lightbox-cursor.right {
    cursor: url('cursors/white/cursor-right-retina.png'), e-resize;
  }

}

Absolute paths necessary for .cur references

You will need to provide absolute paths in your style sheet for old Internet Explorers, so that they find the .cur files. Depending on how you implement the style sheet, you will need to adapt the styles, for example:

.sl-index-wrapper {
  cursor: url('cursors/white/cursor-close.png'), url('http://yourdomain.com/cursors/white/cursor-close.cur'), crosshair;
}

Because you now use white cursors, you might want to have black colored overlays, so that the close cursors become visible:

/* both overlays should have a black, maybe non-transparent background */
.sl-index-overlay,
.sl-lightbox-overlay {
  background: #000; opacity: 1;
}

Design your own cursors

If you like, you can design you own cursor icons. You have to overwrite the default styles as shown in the previous section. You will then need to create the following images:

  • blank.gif — a 1x1 pixel transparent gif (used in the lightbox module)
  • cursor-close.png — a cursor for closing the modules
  • cursor-close-retina.png — a retina version (same size, but use 288 dpi and do not use the web export feature of Adobe Photoshop)
  • cursor-close.cur — a .cur version for old Internet Explorers (they should always be 32x32 pixel, because they are resized to that size by the Internet Explorers)
  • cursor-left.png — a left arrow for navigating to the previous image in the lightbox module
  • cursor-left-retina.png — a retina version (same size, but use 288 dpi and do not use the web export feature of Adobe Photoshop)
  • cursor-left.cur — a .cur version for old Internet Explorers (they should always be 32x32 pixel, because they are resized to that size by the Internet Explorers)
  • cursor-right.png — a right arrow for navigating to the next image in the lightbox module
  • cursor-right-retina.png — a retina version (same size, but use 288 dpi and do not use the web export feature of Adobe Photoshop)
  • cursor-right.cur — a .cur version for old Internet Explorers (they should always be 32x32 pixel, because they are resized to that size by the Internet Explorers)
  • loader.gif — a loader gif as a retina version (e.g. 32x32 pixel)
  • loader-small.gif — a loader gif, half the size of the retina version (e.g. 16x16 pixel), for old Internet Explorers that do not support the background-size CSS attribute

Touch & CSS3 animations

Enabling touch support

You will need two more Javascripts, to run nicely on touch devices:

Download Modernizr with touch and csstransitions features enabled and integrate it in the header of your page, like so:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  <head>
    <meta charset="utf-8" />

    <!-- ... -->

    <script type="text/javascript" src="js/modernizr.min.js"></script>

    <!-- ... -->

Then include the jQuery version of Hammer.js before integrating the ScalableLightbox:

<!-- ... -->

<script type="text/javascript" src="js/jquery.hammer-full.min.js"></script>
<script type="text/javascript" src="js/jquery.scalable-lightbox.js"></script>

<!-- ... -->

That's it. ScalableLightbox will notice that you have all it takes to activate touch support.

Enabling hardware accelerated animations

The plugin also uses Modernizr to detect CSS3 transitions. Therefore integrate Modernizr like previously described with at least the csstransitions feature activated. This is everything ScalableLightbox needs to activate hardware accelerated animations.