Methods

After you have made the initialization of the Plugin by defining the necessary options, you can interact with the Plugin via various methods.

Display methods

open

The open method is used to either open the thumbnails of a provided deck in the index module or to display a lightbox of a specific deck in the lightbox module.

$.ScalableLightbox("open", opts, function() {

  // nonrecurring callback when opening has finished

});

Via the opts object of this method, you can define, which module should be opened (either "index" or "lightbox"), provide the id of the deck and in case of the lightbox module, which image should be displayed via the index attribute (index counting starts at 0).

// lightbox module
// open deck 2 (displaying first image, index: 0 by default)
opts = { module: "lightbox", deck: 2 };

// open deck 10 and display second image (index starts at 0)
opts = { module: "lightbox", deck: 10, index: 1 };

// index module
opts = { module: "index", deck: 2 };

Therefore to open the deck with id 15 and display the third image, you put the following:

$.ScalableLightbox("open", { module: "lightbox", deck: 15, index: 2 }, function() {

  // nonrecurring callback when opening has finished

});

In case you want to invoke a callback on every open call, you should define a general open callback in the callback settings. If a nonrecurring callback is provided along with the method above, the general open callback is not executed.

If current module has the overlay attribute set to true (see index overlay and lightbox overlay attribute for more information), it will first fade in the overlay, then the corresponding module. Therefore, total transition time for the index module is fadeInIndexOverlay plus fadeInIndex and for the lightbox module fadeInLightboxOverlay plus fadeInLightbox. The callback is called after the total transition time (and internal tasks) have elapsed.

close

Closes the currently opened (displayed) lightbox or index module. The method features a nonrecurring callback, that gets triggered once the closing has finished.

$.ScalableLightbox("close", function() {

  // nonrecurring callback when closing has finished

});

In case you want to invoke a callback on every close call, you should define a general close callback in the callback settings. If a nonrecurring callback is provided along with the method above, the general close callback is not executed.

If current module has the overlay attribute set to true (see index overlay and lightbox overlay attribute for more information), it will first fade out the module, then the corresponding overlay. Therefore, total transition time for the index module is fadeOutIndex plus fadeOutIndexOverlay and for the lightbox module fadeOutLightbox plus fadeOutLightboxOverlay. The callback is called after the total transition time (and internal tasks) have elapsed.

This method is also used internally. For the index module in case a user clicks outside an index thumbnail or presses the ESC key (see close controls for deactivation). For the lightbox module in case a user clicks outside the lightbox container or presses the ESC key (see close controls for deactivation).

destroy

To destroy all the markup the Plugin has created and remove all event bindings of the Plugin. A nonrecurring callback may be employed, that is invoked after the destruction.

$.ScalableLightbox("destroy", function() {

  // nonrecurring callback when destruction has finished

});

prev

This is only working, if the lightbox module is enabled and a lightbox is currently opened. It will navigate the lightbox from the current image to the previous one in the deck. If it is the first image, it will automatically start from the end again (endless carousel).

$.ScalableLightbox("prev");

This method is also used internally in case a user clicks on the left side of the lightbox container (see clicks controls for deactivation) as well as the left keyboard arrow (see keys controls for deactivation).

next

This is only working, if the lightbox module is enabled and a lightbox is currently opened. It will navigate the lightbox from the current image to the next one in the deck. If it is the last image, it will automatically start from the beginning again (endless carousel).

$.ScalableLightbox("next");

This method is also used internally in case a user clicks on the right side of the lightbox container (see clicks controls for deactivation) as well as the right keyboard arrow (see keys controls for deactivation).

goto

This is only working, if the lightbox module is enabled and a lightbox is currently opened. It will navigate the lightbox from the current image to the i-th one in the deck.

Counting starts at 0. If the provided index is lower than 0 or higher then the total number of items in the current deck, it will display the last image of the current deck.

$.ScalableLightbox("goto", index);

// go to 10th image of the current deck
$.ScalableLightbox("goto", 9);

// go to first image of the current deck
$.ScalableLightbox("goto", 0);

// go to last image of the current deck
// by providing a number below zero or
// higher then the total number of items
// in the current deck
$.ScalableLightbox("goto", -1);
$.ScalableLightbox("goto", 1000);

This method is also used internally by the Plugin to navigate from a thumbnail of the index module to the corresponding image in the lightbox module, once the user has clicked on the thumbnail.

Resize method

resize

This method is used to manually resize the Plugin. Whether the index or lightbox module is resized, depends on what is currently active. The method features a nonrecurring callback, that gets triggered once the resizing of the Plugin has finished. In case the plugin is not active, meaning it is not displayed to the user, nothing (not even the callback) will be executed.

$.ScalableLightbox("resize", function() {

  // nonrecurring callback when plugin resize has finished

});

In case you want to invoke a callback on every resize call, you should define a general resize callback in the callback settings. If a nonrecurring callback is provided along with the method above, the general resize callback is not executed.

Usually you do not need to invoke this method, because resizing is done automatically by the Plugin. However you might want to deactivate auto-resizing by setting the resize option to false and then do the resizing within your own code.

$.ScalableLightbox({
  resize: false
});

$(window).bind("resize", function() {

  // do my resize stuff
  // ...

  $.ScalableLightbox("resize");

  // ...

});

Performance optimized resize

The code of the Plugin resize is only fully executed if either the index module or the lightbox module is active. Therefore, even when you call the resizing method within your own code, while no Plugin module is presented to the user, the overhead is minimal. Literally, the Plugin unbinds the resizing method whenever the close method is called, and rebinds it, once the open method has been called.