API

Skins

Skins are a combination of Javascript Options, CSS and a PNG sprite, together they style the overlay window. To use a skin the only option required is the skin option. Options of the selected skin are then applied as a starting point. Additional options will overwrite what's defined on the skin:

skin: 'light', controls: 'top'

Creating skins

Newly created skins will inherit their options from a base skin defined in lightview.js. Because of this inheritance the only Options that have to be defined are those different from the base skin. Here's how a custom skin would be created:

$.extend(Lightview.Skins, {
  'custom' : {
    border: {
      size: 10,
      color: '#101010',
      opacity: .5
    },
    radius: {
      size: 10,
      position: 'border'
    },
    shadow: false
  }
});

It's recommended to place Javascript and CSS for custom skins in separate files, including those below the Lightview files will make it possible to upgrade without losing anything.

<script type='text/javascript' src='/js/lightview/lightview.js'></script>
<script type='text/javascript' src='/js/lightview/lightview-custom-skins.js'></script>

<link rel="stylesheet" type="text/css" href="/css/lightview/lightview.css"/>
<link rel="stylesheet" type="text/css" href="/css/lightview/lightview-custom-skins.css"/>

After the skin has been created it can be applied using the skin option:

<a href="image.jpg" class="lightview" data-lightview-options="skin: 'custom'">Custom skin</a>

When using groups the best way to apply the skin is using the group-options:

<a href="image1.jpg" 
    class="lightview" 
    data-lightview-group="skin-group-example" 
    data-lightview-group-options="skin: 'custom', controls: 'thumbnails'">Group with skin 1</a>
<a href="image2.jpg" 
    class="lightview" 
    data-lightview-group="skin-group-example">Group with skin 2</a>

CSS & Sprites

The name of the skin is used within certain classes so elements can easily be targetted. Images for each skin are combined into a single sprite. What this means is that only one image has to be loaded per skin, the background of the sprite is shifted using CSS to create the individual images.

/* sprite - we'll use the sprite of the 'dark' skin for this example */
.lv_window_custom .lv_side_button_previous,
.lv_window_custom .lv_side_button_next,
.lv_window_custom .lv_button_top_close,
.lv_window_custom .lv_controls_top_close_button,
.lv_window_custom .lv_slider .lv_icon,
.lv_window_custom .lv_slider_number,
.lv_window_custom .lv_slider_number_empty,
.lv_window_custom .lv_controls_top_close_button,
.lv_controls_top_skin_custom .lv_icon,
.lv_controls_top_close_skin_custom .lv_controls_top_close_button {
  background-image: url('skins/dark/sprite.png') !important;
  background-image: url('skins/dark/sprite_ie_lt_7.png'); /* IE < 7 */
}

/* close button */
.lv_window_custom .lv_button_top_close {
  top: 18px;
  left: 53px;
}

/* controls: 'relative' */
.lv_window_custom .lv_slider_number { color: #acacac; }
.lv_window_custom .lv_slider_number:hover { color: #e1e1e1; }
.lv_window_custom .lv_slider_number_active,
.lv_window_custom .lv_slider_number_active:hover { color: #5d5d5d; }

/* controls: 'top' */
.lv_controls_top_skin_custom .lv_icon { color: #9d9d9d; }
.lv_controls_top_skin_custom .lv_icon:hover { color: #e1e1e1; }
.lv_controls_top_skin_custom .lv_icon_disabled,
.lv_controls_top_skin_custom .lv_icon_disabled:hover { color: #141414; }

Sprites in IE6

Internet Explorer 6 doesn't support transparent PNG images. PNG8 however is supported on this browser, so Lightview uses a PNG8 image alongside the default PNG24 sprite to support all browsers.

When using a tool like Photoshop, PNG8 will be available under 'File > Save for web'. Photoshop gives the option to provide a 'Matte' color. This should be a color that closely resembles the overlay once it is on the background. The skins that come with Lightview use #333333.

Spinners

The loading animations are created using a small library called Spinners. Documentation for the possible options is available on the Spinners GitHub page. These options can be set using the spinner option:

spinner: {
  color: '#fff',
  radius: 5,
  height: 5,
  width: 1.8,
  dashes:  12,
  opacity: 1,
  padding: 3,
  rotation: 700
}

Changing the default skin

The default skin can be changed from 'dark' to any other skin using Lightview.setDefaultSkin(). It should be called after the lightview.js include or after a file that defines custom skins, for example:

<script type='text/javascript' src='/js/lightview/lightview.js'></script>
<script type='text/javascript' src='/js/lightview/lightview-custom-skins.js'></script>

<link rel="stylesheet" type="text/css" href="/css/lightview/lightview.css"/>
<link rel="stylesheet" type="text/css" href="/css/lightview/lightview-custom-skins.css"/>

<script type='text/javascript'>
  Lightview.setDefaultSkin('custom');
</script>
Sign in