Version: 1.30
Changelog
<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='http://www.youtube.com/watch?v=JByDbPn6A1o'>Youtube</a> <a class='nch-lightbox' href='http://vimeo.com/62092214'>Vimeo</a> <a class="nch-lightbox" href="http://www.dailymotion.com/video/x11xzns_onerepublic...">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='http://codecanyon.net' data-width='1080' data-height='540'>Codecanyon Iframe</a>
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>
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>
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 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' );
});
These options are for informational purposes only. Detailed examples are included in the documentation.
| 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. |
| 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>
| 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 |
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 ).