jQuery Image and Video LightBox Plugin

HTML5 Lightbox Tutorial

How to initialize the HTML5 Lightbox after page load

Customise HTML5 Lightbox with Options

There are two ways to customise HTML5 Lightbox with options.

The first way is to add a JavaScript snippet to the <head> section of your webpage. For example:

<script type="text/javascript">
var html5lightbox_options = {
        overlaybgcolor: "#333",
        overlayopacity: "1"
};
</script>

The above code will change the overlay background color to #333 and change the opacity to 1. The change will affect all lightboxes on the webpage.

The second method is to add a data tag to the href link. The option will only affect the specified link. For example:

<a href="images/Evening_1024.jpg" data-overlaybgcolor="#333" data-overlayopacity="1" class="html5lightbox" title="Use data tag to change the lightbox overlay color to dark grey">Click to open lightbox</a>

The demo is as following: Click to open lightbox

HTML5 Lightbox Options

Name	Description	Default value
`autoopen`	Automatically open the lightbox on page load	`false`
`autoopendelay`	The delay (in milliseconds) to open the lightbox if the option autoopen is true	`0`
`autoclose`	Automatically close the lightbox when the video ends. This option works for YouTube, Vimeo and self-hosted mp4 videos.	`false`
`autoclosedelay`	The delay (in milliseconds) to close the lightbox when the option autoclose is true and the video is finished	`0`
`inityoutube`	Initialise and load YouTube API	`true`
`initvimeo`	Initialise and load Vimeo API	`true`
`overlaybgcolor`	Overlay background color	`#000`
`overlayopacity`	Overlay transparency, from 0 to 1.	`0.9`
`bgcolor`	Background color of the lightbox	`#fff`
`bordersize`	Border width of the lightbox	`8`
`closeonoverlay`	Whent the value is true, the lightbox can be closed by clicking the overlay background. Otherwise, it can only be closed by clicking the close button.	`true`
`alwaysshownavarrows`	Always show the navigation arrows, otherwise it will show the navigation arrows on mouse over (on desktop)	`false`
`autoslide`	Automatically slideshow on popup	`false`
`showplaybutton`	Display the play slideshow button	`true`
`slideinterval`	Interval (ms) when auto slideshow	`5000`
`showtimer`	Show the line timer for image slideshow	`true`
`timerposition`	The position of the line timer: top or bottom	`bottom`
`timercolor`	The color of line timer	`#dc572e`
`fullscreenmode`	Whether to display the lightbox in fullscreen mode. In fullscreen mode, the close button will be displayed on the top right corner of the web browser.	`false`
`titlestyle`	Define title position. The available options are `bottom`, `inside`, `left`, `right`.	`bottom`
`imagepercentage`	When the option titlestyle is right or left, the option defines the percentage of the image or video width.	`75`
`titleprefix`	When displaying in a gallery, the prefix will be added to the beginning of the titles. The macro variables %NUM and %TOTAL will be replaced by the index of the current image/video and the total number of the gallery.	`%NUM / %TOTAL`
`titlecss`	Title CSS	`color:#333; font-size:16px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:left;`
`descriptioncss`	Description CSS	`color:#333; font-size:12px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:left; margin:4px 0px 0px; padding: 0px;`
`titleinsidecss`	Title CSS when titlestyle is inside	`color:#fff; font-size:16px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:left;`
`descriptioninsidecss`	Description CSS when titlestyle is inside	`color:#fff; font-size:12px; font-family:Arial,Helvetica,sans-serif; overflow:hidden; text-align:left; margin:4px 0px 0px; padding: 0px;`
`initsocial`	Intialise and load css file for social media buttons	`true`
`showsocial`	Whether to show social media buttons	`false`
`socialposition`	Positioning CSS of social media buttons	`position:absolute;top:100%;right:0;`
`socialdirection`	The direction of the social media buttons	`horizontal` The value could be `horizontal` or `vertical`
`socialbuttonsize`	The size of social media buttons	`32`
`socialbuttonfontsize`	The font size of social media buttons	`18`
`socialrotateeffect`	Whether to enable the hover over rotating effect	`true`
`showfacebook`, `showtwitter`, `showpinterest`	Whether to show Facebook, Twitter and Pinterest share button	`true`
`shownavigation`	Whether to show thumbnails	`true`
`thumbwidth`	Thumbnail width	`96`
`thumbheight`	Thumbnail height	`72`

Connect With Us

Follow @html5box

Services

Products