HTML5 Lightbox Tutorial

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"
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