JS Tutorial
- Overview
- Documents
NACHO Lightbox is the perfect plugin for showcasing images, videos, iframes and even ajax in a modern and usable manner that is available on every device.
Features:
- Flat skin – perfect for modern websites
- Responsive and beyond – very adaptable, perfect for desktop, tablet and even mobile. It hides the thumbnails on small screens to keep the media visible.
- Touch gestures – mouse and touch are unified, so you can do anything using either one.
- Blazing fast – Featuring some of the coolest CSS3 Effects out there, it takes advantage of the GPU on mobile devices.
- Responsive Videos from Youtube and Vimeo.
- Responsive fluid grid included to keep your images aligned.
- Powerful events API – you can control all the options through this easy to use API.
- Retina Graphics – Sharper on every screen
- Deep linking – So when someone shares your image will be taken directly to that image.
- No coding required – Using only jQuery selectors and HTML5 data attributtes
Simple Usage
Single Images
<a class='nch-lightbox' href='1.jpg'><img src='thumbs/1.jpg' style='height:160px'></a>
Galleries
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>
Videos
Just copy and paste the video url from Youtube or Vimeo and you're ready to go.
<a class='nch-lightbox' href='http://www.youtube.com/watch?v=JByDbPn6A1o'>Vimeo</a> <a class='nch-lightbox' href='http://vimeo.com/62092214'>Youtube</a>
Iframes
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='http://codecanyon.net' 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>
AJAX
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, 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> </div> <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:
$.fn.nchlightbox([{
href: '1.jpg',
src: 'thumbs/1.jpg',
},{
href: '2.jpg',
src: 'thumbs/2.jpg'
}],{
open: false,
autoplay: 1
}).appendTo( '#myContainer' );
Events
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( gallery.name == 'uikit' && media.index == 0 )
$.fn.nchlightbox( 'close' );
});
Options
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 |
| backlight | #FFFFFF | HEX Color Code | The default color for the backlight, used in case the media is on other domains |
| 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 |
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=''> </a>
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 |
| stop | event, lightbox | Triggered when the user clicks the stop button, when lightbox is closed or when user cancels the playing state |
| info_open | event, lightbox | Triggered when the user presses the Info button |
| info_close | event, lightbox | Triggered when user exits the Info mode |
