News Examples Documentation Download Buy Forum Contact



XML Extensions


Third Party Software
for krpano

PHOTOGRAPH GALLERY plugin for krpano
by Alexandr Mikhailov -


  • You can create an unlimited number of galleries in the tour.
  • Create a gallery from an unlimited number of photos.
  • No need to prescribe all photos, enter only the name and number of photos.
  • Specify your size, color, transparency of the background and frames, and much more.
  • For each gallery you can create your own individual settings.
  • The ability to install buttons with their own design.
  • There are modes of zoom, slideshow. Dragging a photo (for zooming).

    The Photo Gallery consists of two parts.

    1. Window with thumbnail photos.

    Frame with thumbnails of photos. There is a scrolling with the mouse wheel moving with the left mouse button pressed. The slider on the left proportionally shows the position of the thumbnails in the window. "Snatching" for the slider thumbnail moves. The thumbnail increases when you hover the mouse. When you click on the thumbnail, the corresponding photo opens, in the thumbnail appears the label "picture" of the viewed photo. When you are flipping through the photos or in the slideshow mode, a frame moves around the corresponding thumbnails (the color changes in the settings). With the right of the window button "minimize thumbnails", thumbnails hide shifting to the left. On the gallery call, the status of the thumbnail panel is set - open or closed. You can turn on the "auto-scroll when hovering cursor" function in the settings.

    2. Photo viewer.

    The viewport has a frame that is adjustable in size, color, and transparency. The preview window is automatically scaled. When the thumbnail frame is minimized, the photo window moves to the center.

    Control buttons:
    • The buttons "flipping" photos are located inside the window on the left and right sides.
    • The slide show button is located at the bottom right of the window.
    • Show the number of the photo you are viewing / number of photos in the gallery on the bottom frame on the right. At the bottom left are the photo captions.
    • In the lower frame on the left are the photo captions. Styles of the text of signatures and the counter are adjusted.
    • Button "close the photo". When you click on the background, there is also a close.
    • Button "flipping the photo" on the background in the lower right corner.
    • Zoom buttons "+" "-" on the background in the lower right corner. Pressing and holding respectively increases or decreases the photo. Zoom in with the mouse wheel.
    • The photo is dragged by the left mouse button. On the touchpad - press and move.

    Icons of the buttons are located in the folder "iconGL" - they can be replaced with their own.
  • Preparation of photographs and miniatures for the gallery.

    For each gallery, prepare photos with the same name and numbering from 1 and up (for example - cats1.jpg, cats2.jpg ... cats№.jpg), make them miniatures for the thumbnail window (reduce the size) and place them in, for example, Folder "m".
    Photos should only be with the extension. jpg.
    In the settings you enter only the name and number of photos, the number of photos and the extension is added to the name automatically. Photos for thumbnails are automatically adjusted in width and height, in the settings you need to set a step between them.

    How to connect

    To insert into your tour, put the folder "Gallery_photoSM" in the root folder with the tour.
    Example on how to include plugin in your main xml:

        <krpano .... >
        <!-- include the Galereya_photo -->
        <include url="Gallery_photoSM/Gallery_M.xml" />
        <include url="Gallery_photoSM/Setting_gallery.xml" />

    Create an event, or several events for the execution of which will open the gallery for example - onclick="Galereya(Set_1);" Settings galleries are by default written in the file "Setting_gallery.xml" - "Set_0". These settings can be changed. Set_1 –it set up the first gallery. Settings differ in the number Set_2, Set_3… Set_№.

    If you use the default settings, it is sufficient to specify, for example:
    • the path to the photos (%HTMLPATH%/photo/cats)
    • path to thumbnails of photos (%HTMLPATH%/photo/m/cats)
    • number of photos (12)
    <Set_1  photo="%HTMLPATH%/photo/cats"

    To change settings specific to the gallery list the required parameters, for example in the gallery 3:
    <Set_3  photo="%HTMLPATH%/photo/cats"


    If the «onmousewheel» event is used on the tour, then you need to write listaty_Wheel(); for example:
    <events onmousewheel="action(); listaty_Wheel();" />
    And from the file Gallery_M2.xml remove
    <events onmousewheel="listaty_Wheel();"/>

    Adjustable parameters

      In the file Setting_galereya.xml settings for the gallery settings are registered.
      Do not use a comma instead of a period.

      Set_0 - the default settings

      Set_1 - settings of the first gallery:

    • photo=”%HTMLPATH%/photo/cats “
      Path and name of the photo without a number and extension of the photo, for example there are photos (cats1.jpg,cats2.jpg...cats№.jpg).
    • miniature_photo=”%HTMLPATH%/photo/mini/cats “
      path and name of the photo thumbnail without the number and extension of the photo.
    • number_thumbnails=”10”
      number of photos in this gallery.
    • Step_miniature=”5”
      distance between thumbnails (in pixels).
    • W_prop=”6”
      proportional width (for example, 6/3). Specify the width of the widest aspect ratio of the photos in the gallery(integer more than 2)
    • H_prop=”3”
      proportional to the height(example 6/3).Specify the height ratio(an integer more than 2)
    • photo_height =”90%”
      the maximal height in percentage of the height of the viewport. If set to 100% it will be full filling height, if width allows.
    • thumbbar_position="left"
      three values for binding to the container thumbnail view: "left", "lefttop", "leftbotton"
    • thumbbar_y="0" ,
      displacement of the container under the thumbnails along the y axis (pixel or % of the screen width).
    • thumbbar_x="0" ,
      displacement of the container under the thumbnail along the x axis (pixel or % height).
    • thumbbar_width="130" ,
      the width of the container for thumbnail (pixel or % of the width of the screen).
    • thumbbar_height="50%" ,
      height of the container for thumbnail (pixel or % of height).
    • thumbbar_open="0" ,
      push the thumbnail container when the gallery starts. 0-no, 1-yes.
    • thumbbar_color="0x2D3E50" ,
      color of the container of miniatures.
    • thumbbar_alpha="0.3" ,
      transparency for miniatures (0-1).
    • thumbbar_color_b="1 0xffffff 1" ,
      frame of thumbnail container "thickness (pix.) _ color_transparency".
    • frame_color_thumbnail="1 0xffffff 1" ,
      frame thumbnail of the current picture "width_color_alpha".
    • frame_color_photo="10,10,22,10 0x757575 0.8",
      the width of the frame pictures(pix)"top, right, bottom, left_color_alpha ".
    • Background_color="0x000000" ,
      Setting the color of the background "0x000000"
    • marker_photo="galSM.png" ,
      The name of the thumbnail image in the thumbnail of the scanned photo. The picture should be in the folder "iconGL"
    • autoscrolling="false" ,
      auto-scrolling when hovering over the thumbnails "false", "true".
    • slideshow_interval="3" ,
      interval of slide show per sec.
    • text_open_thumbbar="Show thumbnails" ,
      text when you hover the deployed container under the thumbnail on the arrow.
    • text_of_thumbbar ="Minimize thumbnails" ,
      text when hovering a collapsed container under the thumbnail.
    • style_text_signature"text1galSM" ,
      the text style of the counter photos.
    • style_text_photo_counter="text1galSM",
      the style of the caption text of photos.
    • titles_1="Sun",
      1,2...№ photo number = description of the photo when displayed on the bottom..
    • titles_2="Winter",
    • titles_№="...",

    • File Gallery_M2.xml with opened code. It includes font styles, gallery control buttons, a container for thumbnails and photos. You can create your own buttons and arrange them at your discretion.

      File Gallery_M.xml with closed code. It has the executing code.

    krpano Forum Photo gallery


    View in full window.


    Download photo gallery for krpano

    Fully functional demo versions of the photo gallery can be downloaded here.
    Download demo version plugin with photo gallery for Windows and MAC OS. size 6 Mb.

    Archieve includes:

    • Working example of use.
    • In the example folder "Gallery_photoSM" with the gallery files in which:
      • Folder iconGL.
      • Gallery_M.xml (demo version. closed code)
      • Gallery_M2.xml
      • Setting_gallery.xml
    If you liked the gallery, before you buy it, test it on your tour by connecting the folder "Gallery_photoSM".

    To buy plugin for 23 EUR.

    After payment, I will send a Galereya_M.xml file to your mail without a demo of the signature within 24 hours.
    Updates for this plugin are free!


    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.