News • Examples • Documentation • Download • Buy • Forum • Contact

Easy HTML Lightbox Plugin for Krpano & Panotour Pro
by light_line - vr.developer786@gmail.com
Version 1.62

Description

  • Easy HTML Lightbox Plugin is easy to use HTML lightbox / pop-up plugin for Krpano.
  • Open HTML page in a lightbox or Krpano layer
  • 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 pr16).
  • Panotour Pro plugin is included.

Features

  • This plugin supports most popular contents and sites like internet pages, image galleries and slide shows, Youtube videos, Vimeo videos, local videos, Google maps, other panorama pages, Inline HTML element, PDF files, etc...
  • This plugin is completely responsive and adapted on mobile and tablet.
  • This plugin supports pan & zoom under image galleries and slide shows mode.
  • This plugin has this ability to open an infobox as a popup. (a popup with title, description and slideshow) EXCLUSIVEDEMO
  • This plugin has this ability to load the HTML page in a Krpano layer. EXCLUSIVEDEMO
  • You can run krpano actions from the iframe HTML page.NEW
    E.g. you can change the scene or run any other Krpano actions to manage your tour.
    I think many exciting and cool ideas can be happened by this ability.
  • This plugin has this ability to load multiple HTML pages in a single lightbox and let users slide between HTML pages. NEWDEMO
  • This plugin works well under the fullscreen mode of Krpano.
  • This plugin has this ability to open a zoomable image popup. NEWDEMO
  • This plugin has this ability to play video or open image in VR mode NEWDEMO

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!


The plugin download link will be provided within one day
(usually less than 6 hours)
39 € fixed price




More plugins by this developer

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','*parent_layer')
  • open a URL or HTML file
    • URL: website url or HTML file path.
    • if you want to open several websites in a single lightbox, you have to separate URLs by a semicolon(;) like the sample code: 
      'https://responsivedesign.is/examples/;http://www.responsivewebdesign.co.uk/'
    • 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.
    • parent_layer: if you want to load the HTML page in a Krpano layer, you have to set layer path here (optional).
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);
plugin[easy_html_lightbox].open_url('https://krpano.com','','','','','layer[sidebar]');
plugin[easy_html_lightbox].open_url('https://responsivedesign.is/examples/;http://www.responsivewebdesign.co.uk/');

<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');" />
Action name
open_infobox_popup('TITLE','IMAGE_PATH','DESCRIPTION_TEXT','WIDTH','HEIGHT')
  • open an infobox as a popup.
    • IMAGE_PATH: 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'
    • DESCRIPTION_TEXT: lightbox title (optional).
    • WIDTH: lightbox width (with px).
    • HEIGHT: lightbox height (with px).
Examples
open_infobox_popup('Sample Title','image.jpg','Sample title here Sample title here <br/> Sample title here Sample title here','300px','400px');
Action name
open_zoomable_image('title','URL')
  • Open a zoomable image popup
    • title: lightbox title (optional).
    • 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'
Examples
plugin[easy_html_lightbox].open_zoomable_image('Test Title','demo_files/demo-1.jpg'); 

plugin[easy_html_lightbox].open_zoomable_image('','demo_files/demo-2.jpg'); 

plugin[easy_html_lightbox].open_zoomable_image('Test Title 1;Test Title 2;Test Title 3;Test Title 4','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_zoomable_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_zoomable_image('','demo_files/demo-3.jpg;demo_files/demo-4.jpg;demo_files/demo-2.jpg;demo_files/demo-1.jpg');" />

License

This plugin is offered as a commercial plugin. It is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will the author of the plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not the plugin author have been advised of the possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event the plugin author will have no liability arising out of this agreement.