Examples
Thumbs gallery
Lets start with one of most common use cases - a gallery of thumbs where each thumb should be enlarged when clicked. Once light-box is up you should be able to traverse images in collection either via arrows on screen or keyboard controls (gamers might appreciate that "a" and "d" will work as arrow keys do).
// using plain js
new SimpleLightbox({elements: '.imageGallery1 a'});
// or if using jQuery
$('.imageGallery1 a').simpleLightbox();
Gallery from array of images
Often it is required to show image or gallery of images directly from code. Clicking here will display images like so.
SimpleLightbox.open({
items: ['demo/images/1big.jpg', 'demo/images/2big.jpg', 'demo/images/3big.jpg']
});
Custom content
There are times when you need to show some other type of content in lightbox beside images. SimpleLightbox can be used to display forms, teasers or any custom html content. Clicking here will display the text above in lightbox form.
SimpleLightbox.open({
content: '<div class="contentInPopup"><h3 class="attireTitleType3">Custom content</h3>...',
elementClass: 'slbContentEl'
});
Displaying video
Sometimes you need to show a video in light-box (Video can be placed somewhere in gallery as well).
$('.lightBoxVideoLink').simpleLightbox();
Curious case of library lazy loading
Lets say that you have a performance budget and you have a thumb gallery on your web app. You want light-box library resources to be lazy loaded (JS and CSS) after user clicked on thumb. If we assume that you have an implementation of resource loader your application code might end up looking like this:
var $items = $('.gallery a');
$items.on('click', function(e) {
resourceLoader.makeSureIsLoaded('$.SimpleLightbox', function() {
SimpleLightbox.open({
$items: $items,
startAt: $items.index($(e.target)),
bindToItems: false
});
});
});
