Scalable Lightbox

open

The open method is used to either open the thumbnails of a provided deck in the index moduleor 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. 

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. 

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 willnavigate 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 willnavigate 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 willnavigate 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

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 tofalse and then do the resizing within your own code.

$.ScalableLightbox({
  resize: false
});

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

  // do my resize stuff
  // ...

  $.ScalableLightbox("resize");

  // ...

});