Examples

The following examples should help you to easily understand on how you may integrate ScalableLightbox within your own project.

Example #1

Story

You just want to see how the Plugin works, without tweaking the design or using custom Javascript code. You are on a projects overview page, that displays thumbnails, which when clicked, will open a lightbox to display detail images of the corresponding project. You will use the data option to define the data structure inline. You want to enable touch support and make use of the hardware accelerated CSS3 transitions. In addition, you will use the masonry layout option for the index module.

Setup

Go ahead and download the following files:

Code

You start by integrating the Plugin's style sheet jquery.scalable-lightbox.css and Modernizr in the head section of your page:

<!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" />

    <!-- ... -->

    <!-- ScalableLightbox Plugin styles -->
    <link rel="stylesheet" href="/assets/jquery.scalable-lightbox.css" />

    <!-- ... -->

    <!-- Modernizr feature detection -->
    <script type="text/javascript" src="/assets/modernizr.min.js"></script>

    <!-- ... -->
  </head>

Then you define the HTML structure of the project overview thumbnails:

<body>
  <div class="container">

    <h1>Our Projects</h1>


    <div id="projects-container" class="clearfix">

      <a class="project-item" href="#1">
        <div class="img">
          <img src="/assets/img/thumbs/canyon-house.jpg" />
        </div>
        <div class="caption">
          <h3>Canyon House</h3>
        </div>
      </a>

      <a class="project-item" href="#2">
        <div class="img">
          <img src="/assets/img/thumbs/italpromo.jpg" />
        </div>
        <div class="caption">
          <h3>Italpromo</h3>
        </div>
      </a>

    </div>

  </div>

  <!-- ... -->

Next you will integrate the jQuery library as well as the third party jQuery Plugins (Hammer.js and the Masonry Plugin) before the ScalableLightbox Javascript jquery.scalable-lightbox.js. For performance reasons, it's best to put all those Javascripts at the bottom of the page (and ultimately combine, minify and gzip them).

<!-- jQuery library -->
<script type="text/javascript" src="/assets/js/jquery-1.11.1.min.js"></script>

<!-- 3rd Party Plugins -->
<script type="text/javascript" src="/assets/js/jquery.hammer-full.min.js"></script>
<script type="text/javascript" src="/assets/js/masonry.pkgd.min.js"></script>

<!-- ScalableLightbox Plugin Javascript -->
<script type="text/javascript" src="/assets/jquery.scalable-lightbox.js"></script>

Finally — below the Javascripts that you integrated in the last step — you initialize ScalableLightbox by defining the data structure, setting the index layout to masonry and define the click behavior on the overview thumbnails by employing the open method:

$(function() {

  // initialize ScalableLightbox
  $.ScalableLightbox({
    // show what's happening in
    // the debugger console
    debug:        true,

    // define the path for all
    // resources (images):
    baseImgPath:  '/assets/img/lightbox/',

    // define data structure inline
    data: [
      // canyon house (deck id 1)
      { "id": 1,
        "items": [
          {
            "img": "canyon-house/01.jpg",
            "width": 1500,
            "height": 2173,
            "caption": "Canyon House 01.jpg by <a href=\"http://www.labics.it\" target=\"_blank\">Labics</a>"
          },
          {
            "img": "canyon-house/04.jpg",
            "width": 1500,
            "height": 1033,
            "caption": "Canyon House 04.jpg by <a href=\"http://www.labics.it\" target=\"_blank\">Labics</a>"
          },
          {
            "img": "canyon-house/03.jpg",
            "width": 1500,
            "height": 2173,
            "caption": "Canyon House 03.jpg by <a href=\"http://www.labics.it\" target=\"_blank\">Labics</a>"
          }
          // additional item objects ...
        ]
      },
      // italpromo (deck id 2)
      { "id": 2,
        "items": [
          {
            "img": "italpromo/01.jpg",
            "width": 1500,
            "height": 2173,
            "caption": "Italpromo 01.jpg by <a href=\"http://www.labics.it\" target=\"_blank\">Labics</a>"
          },
          {
            "img": "italpromo/04.jpg",
            "width": 1500,
            "height": 751,
            "caption": "Italpromo 04.jpg by <a href=\"http://www.labics.it\" target=\"_blank\">Labics</a>"
          },
          {
            "img": "italpromo/05.jpg",
            "width": 1500,
            "height": 1033,
            "caption": "Italpromo 05.jpg by <a href=\"http://www.labics.it\" target=\"_blank\">Labics</a>"
          }
          // additional item objects ...
        ]
      }
    ],
    // set index layout to masonry
    index: {
      layout:     "masonry"
    }
  });



  // define click behavior by employing
  // the open method
  $(".project-item").click(function(e) {

    // get the deck id of the current item
    var id = parseInt($(this).attr("href").substring(1), 10);

    // prevent the default anchor behavior
    e.preventDefault();

    // open the lightbox module
    $.ScalableLightbox("open", { module: "lightbox", deck: id });

  });

});

Example #2

Story

You are on an introduction page, that displays a text of your latest works and you want to reference to projects via index module to give the user an additional visual impression. You will use the api option to define the data structure and generate the JSON with the help of server side code. In addition you tailor the looks of the overlays as well as captions for both the index and lightbox module.

Setup

You download exactly the same files as you did in example #1.

Code

Like in example #1, you start by integrating the Plugin's style sheet jquery.scalable-lightbox.css and Modernizr in the head section of your page. However, this time you provide additional CSS markup to tailor the looks of the overlays and captions for both modules. Because the overlays have a black background color, we also use the white cursors that come along with the plugin.

<!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" />

    <!-- ... -->

    <!-- ScalableLightbox Plugin styles -->
    <link rel="stylesheet" href="/assets/jquery.scalable-lightbox.css" />

    <!-- ScalableLightbox example #2 overwrite styles -->
    <style type="text/css">
      /* change the overlay of both modules to black, no opacity */
      .sl-index-overlay,
      .sl-lightbox-overlay {
        background: #000;
        opacity: 1;
      }

      /* we change the item overlay to a white and reduce
         the opacity to 0.4 */
      .sl-index-item-overlay {
        background: #fff;
        opacity: 0.4;
      }

      /* the index caption should be black, half transparent
         with the text aligned to the left and have a top/bottom
         padding */
      .sl-index-item-caption {
        background: #000;
        padding: 10px 0;
        color: #fff;
        text-align: left;
        opacity: 0.7;
      }

      /* change the link color for the lightbox captions */
      .sl-lightbox-caption-container a,
      .sl-lightbox-caption-container a:visited {
        color: #fff;
      }
      .sl-lightbox-caption-container a:hover {
        border: 0;
        color: #aaa;
      }

      /* we over extend the left and right arrows, so that
         navigation outside of the lightbox container is
         also possible */
      .sl-lightbox-cursor.left {
        left: -50%;
        width: 100%;
      }

      .sl-lightbox-cursor.right {
        right: -50%;
        width: 100%;
      }

      /**** white cursors ****/
      /* (not displayed here for brevity,
         see source of example) */
    </style>

    <!-- ... -->

    <!-- Modernizr feature detection -->
    <script type="text/javascript" src="/assets/modernizr.min.js"></script>

    <!-- ... -->
  </head>

Then you define the HTML structure of your introduction page, referencing the plugin with two text links:

<body>
  <div class="container">

    <div class="intro-item">
      <h2>Canyon House</h2>
      <p>
        A private residence based on a complex three-dimensional map of interlocking space types.
        This commission involved the renovation of a building which itself has several additions dating back to the 1960s. Located inside the Appia Antica Park on the outskirts of Rome, the building serves as the clients’ main residence, and is a space both for work and relaxation.
      </p>
      <p>
        The design uses vertical axes to section <a href="#" id="show-canyon-house">the building</a> into different space types including service areas, distribution areas, main quarters and outdoor areas, establishing a specific spatial and functional sequence as the owners move throughout the building.
      </p>
      <p>
        In addition, the horizontal sequence of floor levels differentiates zones for sleeping, living and work. These horizontal and vertical planes create a three-dimensional map for the house and its functions.
      </p>
    </div>

    <div class="intro-item">
      <h2>Italpromo &amp; Libardi Associati Headquarters</h2>
      <p>
        A new headquarters for the well&dash;known Italian communications agency Italpromo &amp; Libardi Associati in a converted school building in Ostiense, Rome.
      </p>
      <p>
        Ostiense is one of the few remaining industrial areas on the edge of Rome’s historic city centre and is currently undergoing extensive architectural and social regeneration. The brief for <a href="#" id="show-italpromo">this project</a> was to transform an existing building without losing its unique character and retaining its original listed façade.
      </p>
      <p>
        Labics’ main objective was to introduce new functions into the shell of the existing building, creating innovative ways of using the space based on the complex spatial, functional and social relationships within the contemporary workplace. The aim was to find the right balance between individual and shared spaces, between production and social areas.
      </p>
    </div>

  </div>

  <!-- ... -->

In the same way as you did in example #1, you integrate the jQuery library, Hammer.js and the Masonry Plugin before the ScalableLightbox Javascript jquery.scalable-lightbox.js.

<!-- jQuery library -->
<script type="text/javascript" src="/assets/js/jquery-1.11.1.min.js"></script>

<!-- 3rd Party Plugins -->
<script type="text/javascript" src="/assets/js/jquery.hammer-full.min.js"></script>
<script type="text/javascript" src="/assets/js/masonry.pkgd.min.js"></script>

<!-- ScalableLightbox Plugin Javascript -->
<script type="text/javascript" src="/assets/jquery.scalable-lightbox.js"></script>

Finally — below the Javascripts that you integrated in the last step — you initialize ScalableLightbox by defining the data structure via the api attribute, tailor the caption settings of the index module as well as the lightbox module and define the link behavior of the previously defined text links by employing the open method:

$(function() {

  // initialize ScalableLightbox
  $.ScalableLightbox({
    // show what's happening in
    // the debugger console
    debug:        true,

    // define the path for all
    // resources (images):
    baseImgPath:  '/assets/img/lightbox/',

    // define data structure via API
    api:          '/assets/api/data.json',

    // index module setting
    index: {
      // set index layout to masonry
      layout:     "masonry",
      thumb: {
        // use the number caption (default),
        // change the number format and
        // position it on the top
        caption:          "number",
        captionNumberFmt: "Image %n%",
        captionPosition:  "top"
      }
    },

    // lightbox module setting
    lightbox: {
      img: {
        // we display the number in the left
        // caption and change the number format
        captionLeft:            "number",
        captionNumberFmt:       "%n% of %total%",
        // we do not use a caption in the center
        captionCenter:          "none",
        // we use the link to the index module
        // on the right and change the link text
        captionRight:           "index",
        captionIndexTxt:        "Back to Overview",
        // we position the caption container on
        // top, as we did in the index module
        captionPosition:        "above",
        captionVerticalMargin:  10
      }
    }
  });



  // open the index module via the
  // aforementioned text links
  $("#show-canyon-house").click(function(e) {

    // prevent the default anchor behavior
    e.preventDefault();

    // open the lightbox module
    $.ScalableLightbox("open", { module: "index", deck: 1 });

  });

  $("#show-italpromo").click(function(e) {

    // prevent the default anchor behavior
    e.preventDefault();

    // open the lightbox module
    $.ScalableLightbox("open", { module: "index", deck: 2 });

  });

});

Server side JSON

How a server side script for generating the JSON endpoint for PHP could look like, is described in the api section of the options page.

Example #3

Story

You are on an project detail page (in real, for each project one page would exist), that displays the corresponding project in the lightbox module. However you want to display the rest of your page so you disable the lightbox overlay. In addition, you do not need the index module, so you disable that as well. Furthermore, you add text links for navigating to the previous or next image of the current project, through the prev and next method. Finally, you tweak the position of the lightbox elements to fit into your design.

Setup

You download exactly the same files as you did in example #1.

Code

Like in example #1, you start by integrating the Plugin's style sheet jquery.scalable-lightbox.css and Modernizr in the head section of your page. However, you provide additional CSS markup to fit the lightbox elements into your design.

<!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" />

    <!-- ... -->

    <!-- ScalableLightbox Plugin styles -->
    <link rel="stylesheet" href="/assets/jquery.scalable-lightbox.css" />

    <!-- ScalableLightbox example #3 overwrite styles -->
    <style type="text/css">
      /* remove the close cursor from the
         lightbox wrapper */
      .sl-lightbox-wrapper {
        cursor: none;
      }

      /* also remove the close cursor for retina displays */
      @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-lightbox-wrapper {
          cursor: none;
        }
      }


      .sl-lightbox-cursor.left {
        left: -50%;
        width: 100%;
      }

      .sl-lightbox-cursor.right {
        right: -50%;
        width: 100%;
      }

      /* reposition and style
         the index counter */
      .sl-lightbox-caption-container .right {
        position: fixed;
        top: 16px;
        right: 25px;
        height: auto !important;
        font-size: 20px;
        font-weight: 500;
      }

      /* reposition and style the
         lightbox caption */
      .sl-lightbox-caption-container .center {
        position: fixed;
        bottom: 15px;
        left: 0;
        width: 100%;
        height: auto !important;
        font-size: 16px;
        font-weight: 500;
      }

      /* hard transition, also have to change
         fadeLightboxItem setting option
         accordingly */
      .csstransitions .sl-lightbox-decks-container {
        -webkit-transition: all 0 ease;
           -moz-transition: all 0 ease;
            -ms-transition: all 0 ease;
             -o-transition: all 0 ease;
                transition: all 0 ease;
      }
    </style>

    <!-- ... -->

    <!-- Modernizr feature detection -->
    <script type="text/javascript" src="/assets/modernizr.min.js"></script>

    <!-- ... -->
  </head>

Then you define the HTML structure of your project detail page, including the prev and next links for additional navigation:

<body>
  <div class="container">

    <div id="logo">
      <h1><a href="#">Labics</a></h1>
    </div>

    <nav id="topnavi">
      <ul class="clearfix">
        <li class="active"><a href="#">Projects</a></li>
        <li><a href="#">Archive</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <div id="project-name">
      <h2>Canyon House</h2>
    </div>

    <a href="#" id="prev-img">Previous Image</a>
    <a href="#" id="next-img">Next Image</a>

  </div>

  <!-- ... -->

In the same way as you did in example #1, you integrate the jQuery library, Hammer.js and the Masonry Plugin before the ScalableLightbox Javascript jquery.scalable-lightbox.js.

<!-- jQuery library -->
<script type="text/javascript" src="/assets/js/jquery-1.11.1.min.js"></script>

<!-- 3rd Party Plugins -->
<script type="text/javascript" src="/assets/js/jquery.hammer-full.min.js"></script>
<script type="text/javascript" src="/assets/js/masonry.pkgd.min.js"></script>

<!-- ScalableLightbox Plugin Javascript -->
<script type="text/javascript" src="/assets/jquery.scalable-lightbox.js"></script>

Finally — below the Javascripts that you integrated in the last step — you initialize ScalableLightbox by defining the data structure via the api attribute, tailor the caption settings of the index module as well as the lightbox module and define the link behavior of the previously defined text links by employing the open method:

// previously set by server for the
// specific project detail page
window.projectID = 1;

$(function() {
  // initialize ScalableLightbox
  $.ScalableLightbox({
    // show what's happening in
    // the debugger console
    debug:        true,

    // define the path for all
    // resources (images):
    baseImgPath: '/assets/img/lightbox/',

    // define data structure via API
    api:          '/assets/api/data.json',

    // disable index module
    index: {
      enabled:    false
    },

    // lightbox module
    lightbox: {
      // disable overlay
      overlay:                        false,
      padding: {
        vertical:                     220,
        horizontal:                   106,

        verticalMobile:               180,
        horizontalMobile:             50
      },
      img: {
        captionLeft:                  "none",
        captionCenter:                "caption",
        captionRight:                 "number",
        captionNumberFmt:             "%n%/%total%",

        captionVerticalMargin:        7
      },
      // the lightbox cannot be closed, otherwise
      // users would see a white page
      controls: {
        close:                        false
      }
    },
    callbacks: {
      // once a plugin module has been loaded,
      // display the current project in the lightbox
      loaded: function() {

        var regex = /#lightbox\/(\d*)\/(\d*)/,
            match = regex.exec(window.location.hash);

        // hash detect (if true, the plugin
        // will open the contents for you)
        if (!match) {
          $.ScalableLightbox("open", { module: "lightbox", deck: window.projectID });
        }
      }
    },
    // hard transition, also have to change
    // CSS accordingly
    transitions: {
      fadeLightboxItem:               0
    }
  });

  // prev link behavior
  $("#prev-img").click(function(e) {
    e.preventDefault();

    $.ScalableLightbox("prev");
  });

  // next link behavior
  $("#next-img").click(function(e) {
    e.preventDefault();

    $.ScalableLightbox("next");
  });

});