Version: 1.30

Simple Usage

Single Images

<a class='nch-lightbox' href='1.jpg'><img src='thumbs/1.jpg' style='height:160px'></a>


Create one by setting the 'rel' attribute to the same value.

<a class='nch-lightbox' rel='g1' href='1.jpg'><img src='thumbs/1.jpg' style='height:160px'></a>
<a class='nch-lightbox' rel='g1' href='2.jpg'><img src='thumbs/2.jpg' style='height:160px'></a>


Just copy and paste the video url from Youtube or Vimeo and you're ready to go.

<a class='nch-lightbox' href=''>Youtube</a>
<a class='nch-lightbox' href=''>Vimeo</a>
<a class="nch-lightbox" href="">Dailymotion</a>


Just use the page url, and the lightbox will figure itself the rest. You can set the size, or let the iframe fill all the available space.

Codecanyon Iframe
<a class='nch-lightbox' href='' data-width='1080' data-height='540'>Codecanyon Iframe</a>

Inline HTML

Notice how the paragraph automatically adapts to the viewport without having a fixed width.

<p id='inline'>Some text goes here...</p>
<a class='nch-lightbox' href='#inline'>Inline HTML</a>


You can even load up custom controls using AJAX.

<a class='nch-lightbox' href='showcase/ajax.html' >AJAX</a>

Showcase with fluid grid(plugin included)

Resize the page to see it in action.

These images are used for presentation purposes only and their content is not present in the download package. This UI kit is a free product and you can download the PSD file for free from CSSAuthor.

Project details

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Big callout button
<!-- project details, use the id with the info option -->
<div id='project-info' class='nacho-lightbox-info'>
	<h3>Project information</h3>
	Details here ...
	<a class='nacho-lightbox-button' href='Big button'></a>	

<a class='nch-lightbox' rel='project' href='1.jpg#bg2FFC8B'><img width='280' src='thumbs/1.jpg'></a>
<a class='nch-lightbox' rel='project' href='2.jpg#bgD27FFF'><img width='280' src='thumbs/2.jpg'></a>
<!-- more images here-->
<!-- set the options on the last item -->
<a class='nch-lightbox' rel='project' href='8.jpg#bg2FFC8B' data-thumbs='bottom' data-info='project-info' data-grid='320,640,920' data-thumbs='top'><img width='280' src='thumbs/8.jpg'></a>








Advanced examples

Dynamic galleries

The lightbox automatically creates the appropriate markup, so you can include the new gallery in your page. Use open: false to prevent the new gallery from opening and insert it into the #myContainer element:

	href: '1.jpg',
	src: 'thumbs/1.jpg',
	href: '2.jpg',
	src: 'thumbs/2.jpg'
	open: false,
	autoplay: 1
}).appendTo( '#myContainer' );


Events are useful when you need to run custom actions whenever somthing happens. Below is the console:

We can use events to close the lightbox when user has viewed all the images. Let's say our gallery name is 'uikit'. We just need to write the code below:

$.fn.nchlightbox( 'addEvent', 'next', function( event, gallery, media ){

	if( == 'uikit' && media.index == 0 ) 
		$.fn.nchlightbox( 'close' );


These options are for informational purposes only. Detailed examples are included in the documentation.

Plugin options

Option name Default Values Description
mode continuous continuous or linear Linear mode doesn't allow you to jump from the last slide to the first one
thumbs 0 0, top, left, bottom or right Thumbnail column position
thumbsize 100 Number Thumbnail column size in pixels
animation swipe String Any of the effects or 'random'. Sets a default animation for the whole gallery
fxspeed 250 Number The animation duration in milliseconds
backlight #FFFFFF HEX Color Code The default color for the backlight, used in case the media is on other domains. Set to empty('') to disable the backlight
usecolor false Boolean Forces the default color to be used on all images
size '960,540' String Default video size in pixels, width first
margins 10 Number Minimum distance of the media from the container
grid '360,540,720,960' String One column for widths smaller than 360px, two for less than 540 and so on. Can use any number of columns
gridspace 4 Number Distance in pixels between the images in the grid
play 1 0 or 1 Defines if the current lightbox can play
autoplay 0 0 or 1 Autoplay option
duration 4000 Number The number of milliseconds representing the timeout between slides when playing
share 1 0 or 1 Shows the share button in the lightbox
social 'fb,tw,gp,pin' String The sharing buttons and their order
keyboard 1 0 or 1 Enables keyboard controls
fullscreen 1 0 or 1 Enables fullscreen
zoom 1 0 or 1 Defines if the current lightbox can zoom images
info 0 Element ID Embed extra information about your project, will appear under the i tab
cors false Boolean Do a CORS request if the image data isn't accessible
hashpath 'nch/' String Path prefix used for deep linking, example: #nch/{imagenumber}
bgclose false Boolean Allows the lightbox to be closed by clicking the outside of it
captions 'title' String or Boolean Set to false or 0 to disable. Displays the image title as a caption. Only available on image aligned grids.
notouch false Boolean Disables the swiping navigation
nohashes false Boolean Use it to disable the hash navigation. The deep linking will still work.

Media attributtes

Prefix the attributtes with 'data-' to be HTML5 compatible.
Option name Default Values Description
title * 0 String Media title
rel * 0 String Use this attribute to create galleries
type 0 String Use only to force a specific type: image, youtube, vimeo, html, iframe or ajax
href * 0 String Larger image location
src * 0 String Attribute of the children image tag
width 0 Number Any number of pixels or percent
height 0 Number Like width
color auto HEX Color Code The backlight color
effect swipe String You can use the presented effects or you can use 'random'

* = do not prefix; below you have a relative URL, which is automatically treated as AJAX, this is why we used the 'data-type' attribute

<a href='large.jpg' data-color='#FF00DD' rel='gallery1' title='Some image' data-type='iframe' href='myIframe.htm'>
	<img src='thumb.jpg' alt=''>

Available events

Event name Parameters Description
open event, lightbox Triggered when a lightbox instance opens
close event, lightbox Triggered before the closing animation
next event, lightbox, media Media is the target element, not the one that is slided away
previous event, lightbox, media Triggered when the user returns to a media of smaller index
play event, lightbox Triggered when the play button is being pressed
stopevent, lightboxTriggered when the user clicks the stop button, when lightbox is closed or when user cancels the playing state
info_openevent, lightboxTriggered when the user presses the Info button
info_closeevent, lightboxTriggered when user exits the Info mode


Support is offered for free and I will respond in less than 24h(GMT +3). Before, submitting any issue make sure you've read the FAQ on the plugin page: known issues and some tricks are covered there.

This document covers only examples and doesn't replace the documentation file. If you've got any questions, send me a message on my profile page.

If you want to request a feature please do so in the comment section( if the idea is good it will be included in the next free update ).