close panorama

Easy HTML Lightbox Plugin easy_html_lightbox.js
by light_line - vr.developer786@gmail.com
Version 1.0

Description

  • Easy HTML Lightbox Plugin is easy to use HTML Lightbox / pop-up plugin for Krpano.
  • HTML knowledge is not required.
  • Just one line code is required to start using this plugin.
  • Works only in HTML5 and krpano (version min. 1.19 pr4).

Features

  • This plugin supports most popular contents and sites like Intenet pages, Image galleries and slide shows, Youtube videos, Vimeo videos, Local videos, Google maps, other panorama pages, Inline HTML element, PDF files, etc...
  • It is responsive and mobile friendly.
  • This plugin supports pan & zoom under image galleries and slide shows mode.
  • This plugin works well under the fullscreen mode of Krpano.

Buy / Order the plugin

NOTE - this is a commercial plugin - to use it - it must be purchased.

You can purchase this plugin through the link below.
Updates for this plugin are free!

Easy HTML Lightbox Plugin

39 € plus sales tax/VAT*

Syntax / XML Usage Example

<plugin name="easy_html_lightbox" 
        url="plugins/easy_html_lightbox.js" 
        keep="true"
        devices="html5"
        include_jquery="true" 
        include_lightbox="true" 
        theme="dark" 
        background_color="#1e1e1e" 
        />

Plugin Attributes

Attribute nameTypeDefault value
include_jqueryBoolean"true"
  • JQuery* library is a requirement for this plugin, but if it has already been included in your HTML page, you have to set this attribute to "False".
    If it is included, set this attribute to "False", otherwise set it to "true". If you are not sure about it, just use "true".
  • Does the plugin add JQuery to the HTML page?
    • true (default) - add JQuery library.
    • false - do not add JQuery library.

  • * JQuery is an open source and free javascript library which is released under the terms of the MIT license.
Attribute nameTypeDefault value
include_lightboxBoolean"true"
  • Lightbox* library is a requirement for this plugin, but if it has already been included in your HTML page, you have to set this attribute to "False".
    If it is included, set this attribute to "False", otherwise set it to "true". If you are not sure about it, just use "true".
  • Does the plugin add Lightbox to the HTML page?
    • true (default) - add Lightbox library.
    • false - do not add Lightbox library.

  • * Lightbox is an open source and free javascript library which is released under the terms of the MIT license.
Attribute nameTypeDefault value
themestring"dark"
  • Sets background color of the lightbox.
    • dark (default) - dark mode.
    • light - light mode.
Attribute nameTypeDefault value
background_colorstring"#1e1e1e"
  • Sets background color of the lightbox. (as an alternative to the theme)

Plugin Actions

Action name
open_url('URL',width*,height*,'title*','Use_Postprocessing_Plugin')
  • open a URL or HTML file
    • URL: website url or HTML file path.
    • width: lightbox width (optional).
    • height: lightbox height (optional).
    • title: lightbox title (optional).
    • Use_Postprocessing_Plugin: use Postprocessing Plugin to blur the lightbox background (optional).
      • true
      • false (default)
    • if you set this parameter true, Postprocessing Plugin should be included in yor XML file with name="blur" attribute.
Examples
plugin[easy_html_lightbox].open_url('https://krpano.com');
plugin[easy_html_lightbox].open_url('https://krpano.com',640,480,'Krpano Website');
plugin[easy_html_lightbox].open_url('https://krpano.com','','','',true);

<hotspot name="spot_2" style="skin_hotspotstyle" ath="0" atv="15" onclick="plugin[easy_html_lightbox].open_url('https://krpano.com/?v=2&amp;test=2',640,360,'Test Title',true);" />
<layer name="bsp01"  style="button" align="centertop" x="0" y="50"  width="80%" height="30" html="Open URL" onclick="plugin[easy_html_lightbox].open_url('https://krpano.com');" />
Action name
play_video('URL',width*,height*,'title*','Use_Postprocessing_Plugin')
  • Play Video file / Youtube video / Vimeo video
    • URL: video url or video file path.
    • width: lightbox width (optional).
    • height: lightbox height (optional).
    • title: lightbox title (optional).
    • Use_Postprocessing_Plugin: use Postprocessing Plugin to blur the lightbox background (optional).
      • true
      • false (default)
    • if you set this parameter true, Postprocessing Plugin should be included in yor XML file with name="blur" attribute.
Examples
plugin[easy_html_lightbox].play_video('demo_files/demo.mp4');
plugin[easy_html_lightbox].play_video('https://www.youtube.com/watch?v=fJcl6Gw1D8k',640,480,'Test Video');
plugin[easy_html_lightbox].play_video('https://vimeo.com/279629299','','','',true);

<hotspot name="spot_2" style="skin_hotspotstyle" ath="0" atv="15" onclick="plugin[easy_html_lightbox].play_video('demo_files/demo.mp4',640,360,'Test Title',true);" />
<layer name="bsp01"  style="button" align="centertop" x="0" y="50"  width="80%" height="30" html="Open URL" onclick="plugin[easy_html_lightbox].play_video('demo_files/demo.mp4');" />
Action name
open_image('URL',width*,height*,'title*','Use_Postprocessing_Plugin')
  • Open a image or image gallery/slide show
    • URL: image or images file path.
    • if you want to open several images, you have to separate image paths by a semicolon(;) like the sample code:
      'demo_files/demo-3.jpg;demo_files/demo-4.jpg;demo_files/demo-2.jpg;demo_files/demo-1.jpg'
    • width: lightbox width (optional).
    • height: lightbox height (optional).
    • title: lightbox title (optional).
    • Use_Postprocessing_Plugin: use Postprocessing Plugin to blur the lightbox background (optional).
      • true
      • false (default)
    • if you set this parameter true, Postprocessing Plugin should be included in yor XML file with name="blur" attribute.
Examples
plugin[easy_html_lightbox].open_image('demo_files/demo-1.jpg');
plugin[easy_html_lightbox].open_image('demo_files/demo-2.jpg',640,360,'Test Title',true);
plugin[easy_html_lightbox].open_image('demo_files/demo-3.jpg;demo_files/demo-4.jpg;demo_files/demo-2.jpg;demo_files/demo-1.jpg');

<hotspot name="spot_2" style="skin_hotspotstyle" ath="0" atv="15" onclick="plugin[easy_html_lightbox].open_image('demo_files/demo-1.jpg');" />
<layer name="bsp01"  style="button" align="centertop" x="0" y="50"  width="80%" height="30" html="Open Slideshow" onclick="plugin[easy_html_lightbox].open_image('demo_files/demo-3.jpg;demo_files/demo-4.jpg;demo_files/demo-2.jpg;demo_files/demo-1.jpg');" />
Action name
open_inline('HTML_element_ID',width*,height*,'title*','Use_Postprocessing_Plugin')
  • display any HTML element on the page.
    • HTML_element_ID: ID of the element (it should be unique)
    • width: lightbox width (optional).
    • height: lightbox height (optional).
    • title: lightbox title (optional).
    • Use_Postprocessing_Plugin: use Postprocessing Plugin to blur the lightbox background (optional).
      • true
      • false (default)
    • if you set this parameter true, Postprocessing Plugin should be included in yor XML file with name="blur" attribute.
Examples
plugin[easy_html_lightbox].open_inline('sample-content');
plugin[easy_html_lightbox].open_inline('sample-content',640,360,'Test Title',true);

<hotspot name="spot_2" style="skin_hotspotstyle" ath="0" atv="15" onclick="plugin[easy_html_lightbox].open_inline('sample-content');" />
<layer name="bsp01"  style="button" align="centertop" x="0" y="50"  width="80%" height="30" html="Open element" onclick="plugin[easy_html_lightbox].open_inline('sample-content');" />

Example

CLICK TO VIEW EXAMPLE