Gambit Torchbox Lightbox Javascript Demo & Instructions

Our Torchbox lightbox script is our take on a fast, easy to use and minimalist lightbox. Unlike the rest, this is a pure Javascript implementation and is more or less a drop-in lightbox solution with minimal setup required.

When a Torchbox image is clicked, it will open it inside a lightbox. It would look like your image pops out of its place and gets enlarged to full view. Awesome.

The image caption get displayed when the lightbox finishes its animation. The high resolution version (if provided) will load and will replace the image in the lightbox when it's ready. And if the script detects that there are other Torchboxes, it will display a previous and next arrow inside the lightbox so that your visitors can switch back and forth between images.

Try it out below!


See it in Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis mattis, mollis tellus quis, efficitur orci. Ut diam odio, bibendum sit amet lectus quis, tempor euismod lectus. Fusce ac ligula nulla. Vestibulum congue lorem quis magna rhoncus mattis. Integer non convallis magna, vitae accumsan mauris. Proin varius risus a erat commodo commodo. In eu leo id eros dignissim accumsan sit amet non urna. Morbi molestie, mi ac maximus rutrum, ipsum lorem ultrices turpis, dapibus rutrum ex neque vitae nunc. Proin ut consectetur dui. Morbi aliquam purus sem. Duis quis risus quis nulla ultrices aliquam ut eu mi. Aliquam dictum vel urna id fringilla. In hac habitasse platea dictumst. Vivamus pulvinar felis et sodales efficitur. Curabitur viverra, mauris sit amet feugiat varius, erat purus interdum urna, ut ornare libero lorem vel risus.

Aliquam tincidunt nisl vel metus laoreet facilisis. Maecenas finibus est eget orci rutrum, a porta elit vehicula. Pellentesque urna elit, eleifend aliquet sapien eu, fermentum malesuada mi. Vivamus facilisis, justo id mollis cursus, lacus augue lobortis erat, ac fringilla nisi ipsum quis elit. Fusce cursus ligula sed ornare euismod. Sed est neque, pharetra elementum tristique a, elementum sed dolor. Etiam accumsan molestie bibendum.

Maecenas scelerisque eros orci, vehicula suscipit urna varius ut. Integer neque elit, faucibus eget lorem et, imperdiet tempus mi. Curabitur semper tempor tellus, id tristique velit viverra ac. Vivamus vel congue est. Pellentesque luctus aliquam lectus non auctor. Quisque consequat mi nec risus tempor euismod. Vestibulum rutrum sapien quis lectus sagittis aliquam. Quisque blandit nisl non fermentum aliquam. Mauris vestibulum lectus lectus, sed aliquam nunc laoreet non. Quisque sed sapien ultricies, sodales augue non, hendrerit enim. Proin ultrices sed augue vel auctor. In volutpat urna ac purus tempor, ut consequat massa lobortis. Curabitur tempor sit amet sem mollis vulputate. Curabitur in scelerisque leo.

Vestibulum a mi magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean non massa in nisl sagittis porttitor. Praesent tempus, lectus ac tempor auctor, massa turpis vehicula lorem, vitae suscipit odio lacus vel ex. In sed elementum risus. In vulputate orci et eleifend volutpat. Maecenas tempor, dolor sed blandit viverra, arcu sapien tristique tortor, commodo rutrum ante ipsum id magna. Quisque vel volutpat mauris. Curabitur vestibulum tincidunt consequat. Duis faucibus diam at justo fermentum, nec tempus est porttitor.


Features


Setup

One. Include the Scripts

Copy the scripts dist/js/min/gambit-torchbox-min.js and dist/css/gambit-torchbox.css into your root directory and then include them in your <head> tag:

<script type='text/javascript' src='gambit-torchbox-min.js'></script>
<link href='gambit-torchbox.css' rel='stylesheet' type='text/css'>

Two. Initialize Torchbox

Start Torchbox with this line of code, put this in your <head> tag.

<script>
var torchbox = new GambitTorchbox();
</script>
Do not wrap this initialize code inside jQuery's ready function or a document onload listener.

Three. Add Classes & Attributes

You'll need to add a class & a few attributes to your image tags in order to make them trigger a Torchbox when clicked.

Modify your <img> tags:

  1. Add the class gambit_torchbox,
  2. Add the attribute data-hires and add the URL to your high resolution image that you want to load in your lightbox,
  3. Add a title attribute and put in the caption that you want to show up with the image.
If the data-hires is not present, the high resolution image will not be loaded, and your torchbox will show the same image instead. If the title attribute is not present, no caption will be displayed. TIP: If you don't want to add classes, you can change the selector setting (see Settings section below).


Setup Example

For example, if you have this in your HTML and you want this to have a Torchbox:

<img src='http://foo.com/bar.jpg'/>
You should end up with:
<img src='http://foo.com/bar.jpg' class='gambit_torchbox' data-hires='http://foo.com/bar-highres.jpg' title='This is a cool image'>
In this example, the low resolution image is http://foo.com/bar.jpg and
the high resolution image is http://foo.com/bar-highres.jpg


Settings

When initializing Torchbox, you can provide some settings if you want to change the default behavior. Here is how you can do it and the default parameters:

<script>
var torchbox = new GambitTorchbox({
	
	// The selector to use to search for images to attach lightboxes to
	'selector': '.gambit_torchbox',
	
	// The name of the attribute that carries the URL to the high resolution image to display.
	'highres_attribute': 'data-hires',
	
	// The name of the attribute that caption of the image.
	'caption_attribute': 'title',
	
	// If true, arrows will be displayed for navigating to the previous/next Torchbox image
	'navigation': true,
	
	// If true, keyboard navigation (left, right & escape to close) will be enabled
	'key_navigation': true,
	
	// Lightboxes are disabled for mobile devices, choose whether images should open as links or do nothing
	'mobile_behavior': 'none', // 'none' or 'open',
	
	// The width to determine if we are in a mobile device
	'mobile_width': 800
});
</script>


Methods & Functions

You can also control your Torchbox using these functions:

I'm assuming here that you have the instance of GambitTorchbox in a variable torchbox

Open a lightbox

// Open the lightbox of the image with an id of `foo`
var el = document.querySelector('#foo');
torchbox.open( el );

Close the current lightbox

torchbox.close();

With a Torchbox open, move to the next image

torchbox.next();

With a Torchbox open, move to the previous image

torchbox.prev();

Refresh the position of the Torchbox (to ensure it's in the middle of the screen)

torchbox.refreshPosition();

Customizing the Styles of Torchbox

All the styles can be adjusted in CSS. We have provided SCSS files for each component of Torchbox so you can edit them individually.

For reference, here are a few CSS examples on adjusting the major components of Torchbox and their default values:

Overlay color & opacity

.gambit_torchbox_bg {
	background: #000;
}
.gambit_torchbox_bg.open {
	opacity: .85;
}

Caption color

.gambit_torchbox_caption {
	color: #fff;
}

Caption gradient background tint

.gambit_torchbox_caption:before {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 100%);
}

Loading icon color

.gambit_torchbox_loading_icon.la-ball-clip-rotate > div {
	color: #fff;
	background: #fff;
	border-color: #fff;
}

Arrow button background & hover opacity

.gambit_torchbox_prev, .gambit_torchbox_next {
	background: rgba(0,0,0,.5);
}
.gambit_torchbox_prev.open:hover, .gambit_torchbox_next.open:hover {
	background: rgba(0,0,0,.8);
}

Arrow button arrow color

.gambit_torchbox_prev:before, .gambit_torchbox_prev:after,
.gambit_torchbox_next:before, .gambit_torchbox_next:after {
	background: #fff;
}

Where to get Support

If you encounter any bugs in our script, please head over to http://support.gambit.ph and leave us a ticket.


Enjoying our Script? Show us some love!

If you're enjoying our script, help us out by rating our item 5-stars in CodeCanyon! Just head over to your downloads page and rate our item. A high rating will help us provide awesome support and more awesome items.

Images above are all from Pexels.com